HTML5 <canvas> 标签是用于绘制图像，不过，<canvas> 元素本身并没有绘制能力（它仅仅是图形的容器），必须使用脚本（通常是 JS）来完成实际的绘图任务。

　　<canvas>是有兼容性的，Internet Explorer 9、Firefox、Opera、Chrome 以及 Safari 支持 <canvas> 及其属性和方法。（注释：Internet Explorer 8 以及更早的版本不支持 <canvas> 元素。）

好了，其他不多说了，直接上代码。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

        canvas{

            border: 1px solid red;

        }

        #block{

            display: inline-block;

            width: 50px;

            height: 50px;

            vertical-align: top;

            border: 1px solid red;

        }

    </style>

</head>

<body>

    <canvas id="canvas" width="400px" height="400px"></canvas>

    <span id="block"></span>

    <script>

        var canvas = document.getElementById("canvas");

        var ctx = canvas.getContext("2d");

        for(var i = 0;i<16;i++){

            for(var j =0;j<16;j++){

                ctx.fillStyle = "rgb(0,"+(255-i*16)+","+(255-j*16)+")";

                ctx.fillRect(i*25,j*25,25,25);

            }

        }

        canvas.onmousemove = function(e){

            var e = e || window.event;

            var x = e.layerX;

            var y = e.layerY;

            var imgData = ctx.getImageData(x,y,1,1);

            var r = imgData.data[0];

            var g = imgData.data[1];

            var b = imgData.data[2];

            block.style.backgroundColor = "rgb("+r+","+g+","+b+")";

        }

    </script>

</body>

</html>

效果图：

　　下一篇还会继续说canvas实现时钟功能。

H5标签-canvas实现颜色拾取功能的更多相关文章

  1. h5标签canvas关于getImageData跨域的问题

    h5标签canvas关于getImageData跨域的问题 在学习h5的时候,canvas标签中getImageData()报错:security error! 具体代码如下(chrome浏览器): ...

  2. jq仿ps颜色拾取功能-js颜色拾取

    1.效果展示 2.html代码:index.html <!DOCTYPE html> <html lang="en"> <head> <m ...

  3. 通过H5的新标签canvas做出一个时钟的全过程，希望对初学者有帮助

    最近学习了H5中的一个新标签canvas并且用它做出了一个时钟,最下面是成品图像,还不错吧,这只是我学习中的一个小demo,做得有点粗糙,但终究是做出来了,以后再写自己的网页主页再做一个好看点放上去. ...

  4. HTML5、canvas颜色拾取器

    效果图: 代码: <!doctype html> <html lang="en"> <head> <meta charset=" ...

  5. H5中标签Canvas实现图像动画

    一:主题部分 1.介绍 canvas可以实现画图功能,所以只要通过js的控制,就可以实现简单的动画效果. 这里主要是两个程序,一个小球来回上下弹跳,一个是吹气球. 2.弹跳程序 <!DOCTYP ...

  6. EasyNVR网页H5无插件播放摄像机视频功能二次开发之直播通道接口保活示例代码

    背景需求 随着雪亮工程.明厨亮灶.手机看店.智慧幼儿园监控等行业开始将传统的安防摄像头进行互联网.微信直播,我们知道摄像头直播的春天了.将安防摄像头或NVR上的视频流转成互联网直播常用的RTMP.HT ...

  7. html5标签canvas函数drawImage使用方法

    html5中标签canvas,函数drawImage(): 使用drawImage()方法绘制图像.绘图环境提供了该方法的三个不同版本.参数传递三种形式: drawImage(image,x,y):在 ...

  8. h5标签基础 meta标签

    <meta>标签位于<head>标签里面,具体作用有如下: 1.设置网页编码 eg: <meta charset="utf-8"/>  ,//u ...

  9. 关于h5绘制canvas生成图片的注意点！

    1.第一个是关于移动端自适应的问题: 答:如果是最后只要一张canvas生成的图片,而不是要绘制的canvas的图形,则不需要考虑自适应,绘制canvas的时候的宽高,可以直接写成UI提供的图的大小, ...

随机推荐

  1. Ibatis.Net 入门示例(一)

    新项目用的是Ibatis.Net.哥的感觉是NHibernate才是哥的最爱.没办法,即使重复,也要抽时间学习.努力做好这份工作再说吧. 一.Ibatis.Net-SQLServer2008 还是以哥 ...

  2. VS2013项目配置directx11

    假定你已经安装好了direct11 SDK(官方下的既是最新版本)和VS2013,并在VS2013中建立了一个新工程. 用VS2013打开工程后,点击右键属性,选择VC++目录: 其中在包含目录中添加 ...

  3. C# 开发XML Web Service与Java开发WebService

    一.web service基本概念 Web Service也叫XML Web Service WebService是一种可以接收从Internet或者Intranet上的其它系统中传递过来的请求,轻量 ...

  4. mybatis ForEach Collection集合等规范解析（转）

    转自:http://blog.csdn.net/wj3319/article/details/9025349 在SQL开发过程中,动态构建In集合条件查询是比较常见的用法,在Mybatis中提供了fo ...

  5. SVN 首次用TortoiseSVN Checkout 提示Unexpected HTTP status 405

    权限错误 首次使用 因为没有 弹出 用户名密码输入框 无法输入 帐户信息. 解决办法: 点击 仓库地址输入栏 右边 的...按钮 此时弹出的输入框浏览器方式访问的.输入用户名和密码,然后在左侧出来的仓 ...

  6. 完美替换win8.1 x64默认雅黑为宋体方法

    由于显示器不好,安装win8.1 x64系统后,系统默认的雅黑字体实在是看不习惯, 时间稍一常眼睛就发累,还是一直用的xp宋体好,于是寻思着能不能将默认雅黑换成宋体. 网上倒是搜出了许多win7的修改 ...

  7. C++ primer的第二章的主要内容

    这第二章主要是介绍了C++中基本的内置数据类型:整型与浮点型.介绍了什么是变量的过程中了解到了左值与右值的概念.左值是可以出现在赋值语句的左边或者右边,也就是说可以放在等号的左右两边,而右值只能是出现 ...

  8. Unknown type name “CGFloat

    一.编绎显示Unknown type name “CGFloat”  错误解决方法 将Compile Sources As 改为 Objective-C++ 二.如果是extern const引起的. ...

  9. iOS线程

    昨天在项目中使用到了以前所没有使用过的线程,今天有时间来简单的学习一下. 一.线程的创建分为三种方法 (id)init; // designated initializer (id)initWithT ...

  10. Ubuntu 14.10 下网络流量实时监控ifstat iftop命令详解

    ifstat 介绍 ifstat工具是个网络接口监测工具,比较简单看网络流量 实例 默认使用 #ifstat eth0 eth1 KB/s in KB/s out KB/s in KB/s out 0 ...