html5如何用倒置的背景颜色描边？

Question

我想在HTML5中使用选择器工具。当用户单击并移动鼠标时，应从起点到鼠标指针绘制一个矩形。这通常是为笔画的颜色选择一个逻辑运算符（因此线条被绘制为背景的倒数），但看起来我只能在HTML5中逐像素地操作图像。不会太慢吗？有没有直接的方法呢？

Answer 1

您可以优化您的＆＃34;倒置笔画＆＃34;足够快，以及＃34;生活＆＃34;笔。

1. 第2层画布，一个在另一个之上。

2. 在底部画布上绘制倒置图像。

3. 在顶部画布上绘制正常图像。

4. 使用context.globalCompositeOperation =＆＃34; destination-out＆＃34;在顶部画布上绘制笔划。

＆＃34;目的地出＆＃34;合成使顶部画布像素在发生描边时变得透明。

这＆＃34;显示＆＃34;只有笔画所在的倒置图像。

由于GPU协助合成，因此显示非常快。

Answer 2

你可以这两种方式：

1. 反向区域就地并通过重新绘制图像重置
2. 在第二个画布中保留图像的反转版本并绘制剪辑版本

选项1

对于选项1，您需要每次使用JavaScript迭代该区域，与选项2相比，这将是一个相对较慢的操作。

选项1的示例：

// inside the mouse move code (please see live demo below)
ctx.drawImage(img, 0, 0);                        // update image (clear prev inv)

//invert the region
if (w !== 0 && h !== 0) {
    var idata = ctx.getImageData(x1, y1, w, h),  // get buffer
        buffer = idata.data,
        len = buffer.length,
        i = 0;

    for(; i < len; i += 4) {                     // inverse it
        buffer[i] = 255 - buffer[i];
        buffer[i+1] = 255 - buffer[i+1];
        buffer[i+2] = 255 - buffer[i+2];
    }
    ctx.putImageData(idata, x1, y1);
}    

正如您所看到的，只使用JavaScript和CPU，性能并不差。性能阈值取决于区域的大小。

Live demo of option 1

选项2

在选项2中，您预先反转第二个画布中的图像，并将其剪裁版本绘制到主画布上。这意味着从那时起你将获得使用GPU（如果可用）的好处，性能会更好。

选项2的示例：

// have a second canvas setup
var ocanvas = document.createElement('canvas'),
    octx = ocanvas.getContext('2d'),

//invert the off-screen canvas
var idata = octx.getImageData(0, 0, ocanvas.width, ocanvas.height),
    buffer = idata.data,
    len = buffer.length,
    i = 0;
for(; i < len; i += 4) {
    buffer[i] = 255 - buffer[i];
    buffer[i+1] = 255 - buffer[i+1];
    buffer[i+2] = 255 - buffer[i+2];
}
octx.putImageData(idata, 0, 0);

现在问题是获取该区域的区域并使用剪辑版本进行更新：

if (w !== 0 && h !== 0)
    ctx.drawImage(ocanvas, x1, y1, w, h,  x1, y1, w, h);

Live demo of option 2