Javascript 如何在html5画布上使用alpha=0绘制到'；擦除'；

如何使用

alpha=0

绘制HTML5画布？假设我正在制作一个photoshop克隆，我有一个纯红色的图层。我拿起橡皮擦工具，用它画画。它在

rgba（0,0,0,0）

中绘制，让我可以看到背景。如何在HTML5画布中实现这一点

这里有一些代码

var rand=function（v）{
返回Math.random（）*v；
};
var canvas=document.getElementsByTagName（“画布”）[0]；
var ctx=canvas.getContext（“2d”）；
//用黑色填充画布
ctx.fillStyle=“红色”；
ctx.fillRect（0，0，canvas.width，canvas.height）；
//删除一些圆（以0,0,0,0绘制）；
ctx.fillStyle=“rgba（0,0,0,0）”；
ctx.globalCompositeOperation=“复制”；
对于（var ii=0；ii<5；++ii）{
ctx.beginPath（）；
ctx.arc（兰特（画布宽度）、兰特（画布高度），
兰特（50）+20,0,360，假）；
ctx.fill（）；
}
/*
来源于
来源于
来源
源顶
目的地结束
目的地
目的地输出
目的地
打火机
黑暗的
复制
异或
*/

画布{
利润率：10px；
边框：1px纯黑；
背景颜色：黄色；
}

想要红色和黄色圆圈吗

您需要使用：

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

请记住保存以前的

globalCompositeOperation

并将其还原，否则以后透明度将无法正常工作

---

问题在于，默认情况下，“在画布上使用

alpha=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坐标清除重角。结果是清除（擦除）线

---

好的，如果你移动得太快，你可以看到矩形，但我的项目是一个概念，所以它为我做了一个诀窍；）

如果你正在做一个类似于photoshop克隆的东西，那么你最好为每一层创建一个画布。我认为这会大大简化你的工作，同时给你带来更好的性能。

你能解释一下它是如何工作的吗？在我画“擦除”圆圈之前，我小提琴中的画布是255,0,0255。rgba（0,0,0,1）=0,0,0255。阿尔法是如何变为0的？唯一的选择似乎是从源255到目标255。你是什么意思“阿尔法是如何变为

0

？" ? 您是指画布X位置的alpha变为

0

？在这种情况下，就是这样。使用

“destination out”

，它会从现有画布中“剪切”绘制的形状。