从2D画布的选定部分获取rgb色码
get rgb color code from a selected portion of 2D canvas
我在一个橙色的画布里面画了一个小的红色矩形。我引入了一个点击事件,当我只点击红色部分时就会发生。它工作得很好,给了我(255 0 0)
。但右下角的(255 165 0)
是橙色的,显然不是我想要的。为什么会发生这种情况?如果有更聪明的方法,请告知。谢谢!
<html>
<head>
<style>
</style>
</head>
<body>
<script>
function makeit() {
var canvas = document.getElementById("mycanvas");
canvas.width = 200;
canvas.height = 50;
canvas.style.position = "absolute";
canvas.style.top = "30px";
canvas.style.left = "100px";
canvas.style.border = "1px solid black";
var ctx = canvas.getContext('2d');
ctx.fillStyle = "orange";
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.fill();
ctx.fillStyle = "red";
ctx.fillRect(0, 0, 20, 20);
ctx.fill();
canvas.addEventListener('click', myfunc, false);
function myfunc(e) {
if (e.layerX <= 20 && e.layerY <= 20) {
var imageData = ctx.getImageData(e.layerX, e.layerY, 1, 1);
alert(imageData.data[0] + " " + imageData.data[1] + " " + imageData.data[2]);
}
}
}
window.onload = makeit;
</script>
<canvas id="mycanvas"></canvas>
</body>
</html>
你应该改成:
if (e.layerX < 20 && e.layerY < 20)
原因如下:getImageData采样一个矩形。如果您对矩形进行采样:
(20, any_value, 1, 1)
或
(any_value, 20, 1, 1)
你的样本在红色矩形(0,0,20,20)之外。换句话说,位置(x, 20)和(20,y)的像素是橙色的。
CSS边框将整个东西推离1px。如果你想要一个边框,在画布上画出来:)
var canvas = document.getElementById("mycanvas");
canvas.width = 200;
canvas.height = 50;
canvas.style.position = "absolute";
canvas.style.top = "30px";
canvas.style.left = "100px";
var ctx = canvas.getContext('2d');
ctx.fillStyle = "orange";
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.fill();
ctx.fillStyle = "red";
ctx.fillRect(0, 0, 20, 20);
ctx.fill();
canvas.addEventListener('click', myfunc, false);
function myfunc(e) {
if (e.layerX <= 20 && e.layerY <= 20) {
var imageData = ctx.getImageData(e.layerX, e.layerY, 1, 1);
alert(imageData.data[0] + " " + imageData.data[1] + " " + imageData.data[2]);
}
}
http://jsfiddle.net/UQM9Q/相关文章:
- 使用 jQuery 的 .on 函数如何获取事件的原始元素
- jquery试图按名称获取按钮位置
- 如何在jQuery中获取元素的形式
- 如何在php文件中获取$.post-ajax传递的值
- 在Shopify中获取博客文章的图片
- 使用Javascript获取所选选项ID
- 在jQuery中获取表的行索引
- 使用jquery将mysql数据获取到新的表行中
- 在动态创建的元素上获取对特定选择器的引用
- 从城市名称获取惊喜
- Angular只从数组中获取所需的数据
- 无法将数据从firebase获取到我的html页面
- Html获取Rgb中的颜色
- 从 Javascript 中的 rgb 字符串中获取颜色组件
- 如何从 javascript 中的 css 颜色名称中获取 rgb(或十六进制)代码
- 鼠标移动时获取fabric.js中图像像素的rgb值
- 在JavaScript中获取CSS/HTML命名颜色的RGB值
- 如何在js中从透明像素中获取rgb
- 从2D画布的选定部分获取rgb色码
- Javascript函数从RGB值或十六进制值中获取颜色名称