如何在HTML5画布上使用alpha = 0绘图?假设我正在制作一个Photoshop克隆版,我有一个纯红色的图层。我选择橡皮擦工具并开始绘图。它以rgba(0,0,0,0)
的方式绘制,让我能够看到背景。在HTML5画布上如何实现这一点?
以下是一些代码。
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
设置为"copy"会有效地擦除每个圆外部的所有内容。
我可能能够设置剪辑以匹配圆形,但理想情况下,我想用抗锯齿圆形擦除,就像Photoshop画笔一样。
0
?" 的?你是指画布位置 X 处的 alpha 变成了0
吗?如果是这样,那就是 globalCompositeOperation 的工作原理。使用"destination-out"
时,它会从现有画布中 "切割" 出绘制形状。 - Cerbrus