【✘:canvas 颜色选择器(有bug待解决)】

最新推荐文章于 2021-05-12 20:01:41 发布

Hey_Coder

最新推荐文章于 2021-05-12 20:01:41 发布

阅读量282

点赞数

本文链接：https://blog.csdn.net/VickyTsai/article/details/90488201

版权

【canvas 实例汇总】专栏收录该内容

5 篇文章 0 订阅

订阅专栏

颜色选择器
使用getImageData()去展示鼠标光标下的颜色。
- 当前鼠标的位置: 为layerX和layerY
- 查询像素数据: getImageData()给我们提供的在那个位置的像素数组里面的像素数据。
- 使用数组数据设置颜色: 去设置背景颜色和<div>的文字去展示颜色值。

<!DOCTYPE html>
<html>
	<body>
	
		<canvas id="canvas" width="300" height="200" style="border:1px solid">
			Your browser does not support the canvas element.
		</canvas>
		<div id="color">我是要展示的颜色</div>
		
		<script type="text/javascript">
			var img = new Image();
			img.src = 'https://mdn.mozillademos.org/files/5397/rhino.jpg';
			var canvas = document.getElementById('canvas');
			var ctx = canvas.getContext('2d');
			//在画布上 添加一个图片
			img.onload = function() {
			  ctx.drawImage(img, 0, 0);
			  img.style.display = 'none';
			};
			
			
			var color = document.getElementById('color');
			function pick(event) {
			  var x = event.layerX;
			  var y = event.layerY;
			  var imgdata = ctx.getImageData(x, y, 1, 1);//获取ImageData 对象
			  var data = imgdata.data;//获取 ImageData对象 的数据 data
			  var rgba = 'rgba(' + data[0] + ',' + data[1] +
			             ',' + data[2] + ',' + (data[3] / 255) + ')';//把获取的数据中的颜色,赋给rgba
			  color.style.background =  rgba;//把颜色rgba ,赋给标签color的背景色
			  color.textContent = rgba;
			}
			canvas.addEventListener('mousemove', pick);
		</script>
	
	</body>
</html>

关联关系
- getImageData()>imgdata>data>rgba>background
- 问题待解决:图片添加到了画布上但是移动鼠标,div的背景色和文字颜色并没有改变…bug

在这里插入图片描述

参考文档: MDN canvas教程

Hey_Coder

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【✘:canvas 颜色选择器(有bug待解决)】

颜色选择器使用getImageData()去展示鼠标光标下的颜色。当前鼠标的位置: 为layerX和layerY查询像素数据: getImageData()给我们提供的在那个位置的像素数组里面的像素数据。使用数组数据设置颜色: 去设置背景颜色和<div>的文字去展示颜色值。<!DOCTYPE html><html> <bo...
复制链接

扫一扫

专栏目录