如何在画布绘图应用程序

Question

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

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

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

Answer 1

你有

var outlineImage = new Image();
function prepareCanvas(){
outlineImage.src = "images/mickeymouse.png";
}

在你的javascript中。

你如何改变你的形象？

您需要使用新图像准备画布。

如果它不起作用，你可以试试fabric.js。

            header('Content-Type: text/x-vcard; CHARSET=utf-8;');

        $card  = "BEGIN:VCARD\n";
        $card .= "VERSION:2.1\n";

        //Sprache und Vor- und Nachname setzen
        if($this->fields["language"] == "") { $this->fields["language"] = "AR"; }
        $card .= "N;"."CHARSET=utf-8:".$this->fields["lastName"].";".$this->fields["firstName"]."\n";

Answer 2

不透明的白色像素。

您正在使用的图像未显示角色正文中的背景的原因是因为有白色非透明像素覆盖您正在绘制的内容。

修复选项

您有三种选择。

1. 在photoshop中编辑图像（gimp，dotPaint，..等）并删除白色像素。容易。

2. 使用getImageData和屏幕外画布删除白色像素。困难，可能有一些问题。

3. 使用2D上下文globalCompositeOperation＆＃34;乘以＆＃34;绘制图像。最简单，但有一点警告。

轻松修复

最简单的是选项3，这是如何做到的。

• 打开文件＆＃34; html5-canvas-drawing-app.js＆＃34;在文本编辑器中。
• 在图形顶部绘制图像的位置，在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）如果不起作用，请参阅浏览器的帮助。

注意事项

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

将其工作方式相乘

乘法对每个像素和每个像素通道RGBA执行操作。为简单起见，我将所有通道表示为C颜色。其中Cs是源像素（来自图像），而Cd是目标像素（画布）

公式是

Cd = Cd * (Cs / 255);

因此，如果像素为白色Cs = 255，则将目标像素乘以255 / 255，即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通道决定了源图像的RGB值影响目标的数量，但现在上述说明将帮助您了解它的工作原理。

你准备好画画了。