javascript - 如何在 Canvas 绘图应用程序中创建着色图片

Question

所以我一直在尝试创建一个着色 Canvas 绘图应用程序，我发现了这个 github page并尝试一下 here而且效果很好。

但是当我想将图像更改为其他内容时就会出现问题。除了鸭子我想把它改成mickey mouse但应用程序上的画笔 Nib 不会绘制新图像。它只能在鸭子图像上绘制

现在我的问题是，什么样的图像是可以接受的？但我在 github 页面上找不到任何解释。所以我需要帮助来解释绘制它的图像要求。

Answer 1

不透明白色像素。

您使用的图像不显示 Angular 色体内背景的原因是因为有白色非透明像素覆盖了您正在绘制的内容。

修复选项

您有三个选择。

1. 在 Photoshop 中编辑图像(gimp、dotPaint 等)并删除白色像素。简单。

2. 使用 getImageData 和屏幕外 Canvas 删除白色像素。困难并且可能会出现一些问题。

3. 使用 2D 上下文 globalCompositeOperation“乘法”来绘制图像。最简单，有一些小的警告。

轻松修复

最简单的是选项 3，以下是具体操作方法。

• 在文本编辑器中打开文件“html5-canvas-drawing-app.js”。
• 在绘图顶部绘制图像的位置，在 context.drawImage(outlineImage...) 周围添加以下两行代码。(位于文件的第 283 行。)

曾经

// Draw the outline image
context.drawImage(outlineImage, drawingAreaX, drawingAreaY, drawingAreaWidth, drawingAreaHeight);

更改为

// Draw the outline image
context.globalCompositeOperation = "multiply"; // sets the comp op
context.drawImage(outlineImage, drawingAreaX, drawingAreaY, drawingAreaWidth, drawingAreaHeight);
context.globalCompositeOperation = "source-over"; // restore the original comp op state

• 保存文件并启动应用程序。如果没有更改，您可能必须清空浏览器的缓存并重新加载页面。 (使用 [ctrl][F5] Win [Cmd][Shift][r] Mac)如果这不起作用，请参阅您的浏览器的帮助。

注意事项

需要注意的是，它仅适用于黑白图像。下面将解释为什么会这样。

增加其工作原理

Multiply 对每个像素和每个像素 channel RGBA 执行运算。为简单起见，我将所有 channel 表示为 C(代表颜色)。其中 Cs 是源像素(来自图像)，Cd 是目标像素( Canvas )

公式为

Cd = Cd * (Cs / 255);

因此，如果像素为白色Cs = 255，则将目标像素乘以255/255，即 1。Cd * 1所以颜色保持不变。如果源像素为黑色 Cs = 0，则将目标像素与 0/255 相乘，结果为 0。Cd * 0 为 0，因此像素变黑。其他值将降低目标像素的亮度。对于灰色 Cs = 128，您大约有 Cd * 128/255 或 Cd * 0.5

对于 RGB

 Rd = Rd * (Rs / 255);
 Gd = Gd * (Gs / 255);
 Bd = Bd * (Bs / 255);

因此，源上有一个红色像素 [255,0,0]，目标上有一个白色像素 [255,255,255]，结果将是

 255 = 255 * (255 / 255);
 0 = 255 * (0 / 255);
 0 = 255 * (0 / 255);

将红色像素下方的所有像素着色为红色

它比这要复杂一点，因为 Alpha channel 决定源图像的 RGB 值影响目标的量，但现在上面的解释将帮助您理解它是如何工作的。

你已经准备好绘画了。