HTML5所有重叠内容的画布透明度

HTML5 Canvas transparency for all overlapping content

本文关键字：透明度 重叠 HTML5      更新时间：2023-09-26

我用HTML5制作了一个绘图应用程序，它只是一个目前运行良好的基本绘画/画笔工具。问题是，我不知道如何使重叠的路径具有相同的不透明性。

我尝试使用globalAlpha属性，但每次划线时，重叠内容都会变得越来越大胆。

ctx.beginPath(); // init at onmousedown
ctx.lineTo(x, y); // at onmousemove
ctx.stroke(); // at onmousemove

编辑：好吧，我弄错了。基本上，你所需要的就是在画线之前重新绘制画布的"背景"。

看起来你有这个：http://jsfiddle.net/4naMG/2/

我想你想要这个：http://jsfiddle.net/4naMG/1/

唯一的区别是，在第二种情况下，我重新绘制了背景。由于我不做任何特别的事情，我只是清理画布：

ctx.clearRect(0, 0, c.width, c.height);

编辑：与鼠标按钮管理和多路径相同的示例：http://jsfiddle.net/4naMG/3/

（注：为了清楚起见，我在单点路径的情况下作弊了）。

相关文章：