3

您如何alpha = 0使用 HTML5 Canvas 进行绘图？想象一下，我正在制作一个 Photoshop 克隆，我有一个纯红色的图层。我选择橡皮擦工具并用它画画。它吸引了rgba(0,0,0,0)我看透背景。如何在 HTML5 Canvas 中执行此操作？

这是一些代码。

var rand = function(v) {
    return Math.random() * v;
};

var canvas = document.getElementsByTagName("canvas")[0];
var ctx = canvas.getContext("2d");

// fill the canvas with black
ctx.fillStyle = "red";
ctx.fillRect(0, 0, canvas.width, canvas.height);

// Erase some circles (draw them in 0,0,0,0);
ctx.fillStyle = "rgba(0,0,0,0)";
ctx.globalCompositeOperation = "copy";
for (var ii = 0; ii < 5; ++ii) {
    ctx.beginPath();
    ctx.arc(rand(canvas.width), rand(canvas.height), 
            rand(50) + 20, 0, 360, false);
    ctx.fill();
}

/*
source-over    
source-in    
source-out    
source-atop

destination-over    
destination-in    
destination-out    
destination-atop

lighter    
darker    
copy    
xor
*/
canvas {
    margin: 10px;
    border: 1px solid black;
    background-color: yellow;
}
<div>Want red with yellow circles</div>
<canvas></canvas>

这行不通。所有画布操作都被认为是无限大的，这意味着绘制每个圆圈（弧）并globalCompositeOperation设置为“复制”有效地擦除每个圆圈之外的所有内容。

我可能可以设置剪裁以匹配圆圈，但理想情况下我希望能够使用抗锯齿圆圈擦除，就像 Photoshop 画笔一样。

4

3 回答 3

5

你会想要使用：

ctx.fillStyle = "rgba(0,0,0,1)"; // (Drawing with 0 alpha pretty much means doing nothing)
ctx.globalCompositeOperation = "destination-out";

工作示例

请记住保存以前的globalCompositeOperation内容并恢复它，否则以后透明度将无法正常工作。

问题是“alpha=0在画布上绘图只是覆盖了一层不可见的“墨水”，默认情况下。

于 2012-12-28T08:08:47.883 回答
0

如果你必须流畅地擦除，所以当鼠标被点击并移动时，这条线应该被擦除，这可能是一个解决方案：

var canvas = document.getElementById("myCanvas");
var eraseWidth = 5;

$("#myCanvas").mousedown(function(canvas){          //the mousedown (writing) handler, this handler does not draw, it detects if the mouse is down (see mousemove)
    x = canvas.pageX-this.offsetLeft;
    y = canvas.pageY-this.offsetTop;
});

$("#myCanvas").mousemove(function(canvas){
    context.beginPath();
    var x2 = x-(eraseWidth/2);          //x2 is used to center the erased rectangle at the mouse point
    var y2 = y-(eraseWidth/2);          //y2 is used to center the erased rectangle at the mouse point
    context.clearRect(x2, y2, eraseWidth, eraseWidth);              //clear the rectangle at the mouse point (x2 and y2)
    context.closePath();
};

基本上，这是在移动鼠标时清除一个矩形，每次鼠标处理程序发送一个 mousemove 事件并使用画布中心的 x 和 y 坐标来清除重新调整。结果是清除（擦除）的行。

好的，如果你移动得太快，你可以看到矩形，但我的项目是一个概念，所以它对我有用；）

于 2012-12-28T11:57:12.567 回答
0

如果您正在处理类似于 Photoshop 克隆的东西，那么最好为每个图层创建一个画布。我认为这将为您大大简化一切，同时为您提供更好的性能作为回报。

于 2012-12-30T19:16:08.523 回答