Question

这里是我的一些代码：

用红色填充一堆点：（1,1），（2,1），（2,2），（2,3）
观察我没有用红色填充的点的颜色：（2,4）

可以预期，该点将为{ red: 0, green: 0, blue: 0, alpha: 0 }，与“画布”上的任何其他像素一样。

实际上，它是{ alpha: 1, blue: 0, green: 0, red: 255 }。

var canvas = document.getElementById("canvas")
var context = canvas.getContext('2d');

context.fillStyle = "#f00";

// Fill a bunch of points

context.fillRect(1, 1, 1, 1);
context.fillRect(2, 1, 1, 1);
context.fillRect(2, 2, 1, 1);
context.fillRect(2, 3, 1, 1);

// Retrieve color at (2, 4), which I did not fill in

var point = { x: 2, y: 4 }

var imageData = context.getImageData(0, 0, canvas.width, canvas.height);
var start = (point.x + canvas.width * point.y) * 4;
var subarray = imageData.data.subarray(start, start + 4);

// Observe results

console.log({
  red:   subarray[0],
  green: subarray[1],
  blue:  subarray[2],
  alpha: subarray[3],
});

JSFiddle就在这里，如果你想在家里复制它：https://jsfiddle.net/vp0f3ahb/

注意：这个JSFiddle确实重现了这个例子。我在电脑上所做的就是按下播放按钮并观察控制台。我听说它在一些人的电脑上没有重现。这让我想知道这是否是一个浏览器错误？

我的问题是：这怎么可能？ fillRect如何设法渗透到其他像素中，即使我清楚地设置要绘制的像素的宽度和高度为（1,1）？

P.S。我发现解决这个问题的一种方法是在进行任何绘图之前在整个Canvas上调用clearRect（）。我真的不在乎;我只是想知道这里到底发生了什么。

HTML5 Canvas fillRect出血

0 个答案: