好的,我正在制作一个素描应用程序。有两个画布--一个是背景图像,另一个是用户可以在上面绘制的覆盖图。我正在尝试实现一个橡皮擦功能,它将“擦除”用户在覆盖图上绘制的任何路径。到目前为止,我的erase函数如下所示:
function eraseCanvas(bottomCtx, topCtx, x, y, strokeWidth) {
var bottomPixels = bottomCtx.getImageData(x, y, strokeWidth, strokeWidth);
var topPixels = topCtx.getImageData(x, y, strokeWidth, strokeWidth);
for (var i = 0; i < topPixels.data.length; i += 4) {
topPixels.data[i] = bottomPixels.data[i];
topPixels.data[i + 1] = bottomPixels.data[i + 1];
topPixels.data[i + 2] = bottomPixels.data[i + 2];
topPixels.data[i + 3] = bottomPixels.data[i + 3];
}
topCtx.putImageData(topPixels, x, y);
}
本质上,我试图做的是通过使用背景中的像素重写覆盖图上的像素来擦除它们,但这并不起作用。为什么?
发布于 2018-08-02 06:09:57
使用dirtyWidth
和dirtyHeight
参数将像素块从底部上下文直接复制到顶部上下文,可以不简化您的方法吗?
function eraseCanvas(bottomCtx, topCtx, x, y, strokeWidth) {
var bottomPixels = bottomCtx.getImageData(x, y, strokeWidth, strokeWidth);
// Directly draw bottomPixels from bottomCtx into topCtx, at the
// x,y coordinates, with 0,0 offset, between dimensions of
// strokeWidth x strongWidth
topCtx.putImageData(bottomPixels, x, y, 0, 0, strokeWidth, strokeWidth);
}
MDN documentation for putImageData
提供了有关我提到的dirtyWidth
和dirtyHeight
参数的更多信息
https://stackoverflow.com/questions/51642841
复制相似问题