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实现颜色拾取功能的更多相关文章
-
h5标签canvas关于getImageData跨域的问题
h5标签canvas关于getImageData跨域的问题 在学习h5的时候,canvas标签中getImageData()报错:security error! 具体代码如下(chrome浏览器): ...
-
jq仿ps颜色拾取功能-js颜色拾取
1.效果展示 2.html代码:index.html <!DOCTYPE html> <html lang="en"> <head> <m ...
-
通过H5的新标签canvas做出一个时钟的全过程，希望对初学者有帮助
最近学习了H5中的一个新标签canvas并且用它做出了一个时钟,最下面是成品图像,还不错吧,这只是我学习中的一个小demo,做得有点粗糙,但终究是做出来了,以后再写自己的网页主页再做一个好看点放上去. ...
-
HTML5、canvas颜色拾取器
效果图: 代码: <!doctype html> <html lang="en"> <head> <meta charset=" ...
-
H5中标签Canvas实现图像动画
一:主题部分 1.介绍 canvas可以实现画图功能,所以只要通过js的控制,就可以实现简单的动画效果. 这里主要是两个程序,一个小球来回上下弹跳,一个是吹气球. 2.弹跳程序 <!DOCTYP ...
-
EasyNVR网页H5无插件播放摄像机视频功能二次开发之直播通道接口保活示例代码
背景需求 随着雪亮工程.明厨亮灶.手机看店.智慧幼儿园监控等行业开始将传统的安防摄像头进行互联网.微信直播,我们知道摄像头直播的春天了.将安防摄像头或NVR上的视频流转成互联网直播常用的RTMP.HT ...
-
html5标签canvas函数drawImage使用方法
html5中标签canvas,函数drawImage(): 使用drawImage()方法绘制图像.绘图环境提供了该方法的三个不同版本.参数传递三种形式: drawImage(image,x,y):在 ...
-
h5标签基础 meta标签
<meta>标签位于<head>标签里面,具体作用有如下: 1.设置网页编码 eg: <meta charset="utf-8"/> ,//u ...
-
关于h5绘制canvas生成图片的注意点！
1.第一个是关于移动端自适应的问题: 答:如果是最后只要一张canvas生成的图片,而不是要绘制的canvas的图形,则不需要考虑自适应,绘制canvas的时候的宽高,可以直接写成UI提供的图的大小, ...
随机推荐
-
❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️html，js随笔。❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️
a标签本身的文字居中. a{ display:block; text-align:center; } 设置div1在另一个div2里居中,(写了左边margin 就别写右边了不然ie6有毛病,当然本身 ...
-
OSG中的示例程序简介
OSG中的示例程序简介 转自:http://www.cnblogs.com/indif/archive/2011/05/13/2045136.html 1.example_osganimate一)演示 ...
-
ThinkPHP CURD返回结果参考
ThinkPHP CURD返回结果参考: 1)查询$table->find() ##返回一条记录,是一个关联数组,是一维数组.$table->select() ##返回第一维是索引数组,第 ...
-
从 Typecho 自定义字段的调用代码看去
千呼万唤,Typecho 的"自定义字段"功能终于在 0.9 中出来了.然而,多数人还蒙在这样一个鼓里--该怎么在模板调用已经设置好的自定义字段呢?让我们从这里开始说下去: Typ ...
-
msp430的两本书 电子版【worldsing笔记】
msp430的两本书,pdf版 MSP430系列单片机接口_技术及系统设计实例 MSP430系列16位超低功耗单片机原理与应用 点击此处下载 ourdev_528863.pdf(文件大小:4.21M) ...
-
PHP null常量和null字节的区别
在学习isset()时,看到了这句话:“如果已经使用 unset() 释放了一个变量之后,它将不再是 isset().若使用 isset() 测试一个被设置成 NULL 的变量,将返回 FALSE.同 ...
-
阿里云安装docker
选centos6.5输入操作系统 yum install docker-io docker -d 提示没有备用IP地址可以用来桥接卡 接下来的网卡中编辑eth0 DEVICE=eth0 ONBOOT ...
-
MongoDB(二)
通过程序来操作数据库: //链接字符串 string connectionString = "mongodb://192.168.1.107"; //数据库名 string dat ...
-
paip.odbc DSN的存储与读取
paip.odbc DSN的存储与读取 作者Attilax , EMAIL:1466519819@qq.com 来源:attilax的专栏 地址:http://blog.csdn.net/atti ...
-
windows phone (19) 深入了解TextBlock
原文:windows phone (19) 深入了解TextBlock TextBlock 一般用于显示文本的元素,我们最为经常用到的是该类的Text属性,其实显示文本有两种呈现方式,一个是设置内部文 ...