H5标签-canvas实现颜色拾取功能
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提供的图的大小, ...
随机推荐
- c++ 普通高精减
//c++ 普通高精减 //codevs 3115 高精度练习之减法 //内容简单,就不注释了. //注意下,&&优先级高于||. #include<cstdio>#inc ...
- 利用dispatch_once创建单例
无论是爱还是恨,你都需要单例.实际上每个iOS或Mac OS应用都至少会有UIApplication或NSApplication. 什么是单例呢?Wikipedia是如此定义的: 在软件工程中,单例 ...
- 微信支付调用JSAPI缺少参数:timeStamp
一般是安卓没问题,苹果会出现这样的问题,弹出下面这样的提示,如果你也是这样,那就恭喜你,现在,你找到解决的方法了 请看红色框框的timeStamp(图片有点小,可以鼠标右键打开图片 查看) 请注意,这 ...
- async = require('async')
var mongoose = require('mongoose'), async = require('async'); mongoose.connect('localhost', 'learn-m ...
- struts中拦截器的开发
1.开发Interceptor类 用户自定义的拦截器一般需要继承AbstractInterceptor类,重写intercept方法 public class UserInterceptor exte ...
- JS编码,解码. asp.net(C#)对应解码,编码
escape不编码字符有69个:*,+,-,.,/,@,_,0-9,a-z,A-Z encodeURI不编码字符有82个:!,#,$,&,',(,),*,+,,,-,.,/,:,;,=,?,@ ...
- iOS 端的 UI 聊天组件ChatKit及代码实现
ChatKit 是一个免费且开源的 UI 聊天组件,自带云服务器,自带推送,支持消息漫游,消息永久存储.底层聊天服务基于LeanCloud(原名 AVOS ) 的 IM 实时通信服务「LeanMess ...
- 监听cell 滑动到 摸个分区
//滑动过程中 - (void)scrollViewDidScroll:(UIScrollView *)scrollView { // NSLog(@"000---%ld", ...
- iOS对象序列化
系统对象的归档我就不介绍了,这个不复杂,自己看一下就会了. 我在这里主要介绍自定义对象的归档. Sample.h文件 // // Sample.h // Serialization // // ...
- acm 20140825
为了自己的梦想,一次次的选择坚强.走上acm这条路,怎么也找不到让自己放弃的理由.我喜欢这种竞赛的氛围,我渴望在赛场上飞扬!想想过去的一个学习,自己并没有干点什么有意义的事.acm也没有好好的做!新的 ...