- 颜色选择器
- 使用
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);
var data = imgdata.data;
var rgba = 'rgba(' + data[0] + ',' + data[1] +
',' + data[2] + ',' + (data[3] / 255) + ')';
color.style.background = rgba;
color.textContent = rgba;
}
canvas.addEventListener('mousemove', pick);
</script>
</body>
</html>
- 关联关系
- getImageData()>imgdata>data>rgba>background
- 问题待解决:图片添加到了 画布上但是移动鼠标,div的背景色和文字颜色并没有改变…bug