HTML5 中填充笔划的透明度

Posted 2023-03-06

【中文标题】HTML5 中填充笔划的透明度

【英文标题】：Transparency of a filled stroke in HTML5

【发布时间】：2012-03-03 03:26:56

【问题描述】：

我正在开发一个 html5 涂鸦应用程序，我想做一种存储桶功能。这个想法是绘制一条路径，它将被关闭并用选定的颜色（笔触的颜色）填充。它适用于纯色，但如果我想要透明的笔触和填充，我会遇到这个问题：

发生的情况是填充一直到笔触的中间（路径的实际采样点），所以形状内部有一条笔触大小一半的线，它更暗，因为它是填充和中风。

你应该可以在this沙盒中看到我在说什么。

【参考方案1】：

当然，使用ctx.globalCompositeOperation = 'destination-atop';，它应该看起来像您期望的那样。

像这样：http://jsfiddle.net/UcyX4/

（取出那条线以查看您遇到的问题）

假设它不是唯一在画布上绘制的东西，您可能必须将它绘制到一个临时画布上，然后将该画布绘制到您的正常画布上，否则它可能会破坏所有先前绘制的形状。所以你需要一个像这样的系统：http://jsfiddle.net/dATfj/

编辑：在 jsfiddle 失败的情况下粘贴代码：

HTML：

<canvas id="canvas1"  ></canvas>

脚本：

var can = document.getElementById('canvas1');
var ctx = can.getContext('2d');

var can2 = document.createElement('canvas');
can2.width = can.width;
can2.height = can.height;
ctx2 = can2.getContext('2d');

ctx.strokeStyle = 'rgba(0,0,0,0.7)';
ctx.fillStyle = 'rgba(0,0,0,0.7)';
ctx.lineWidth = 10;


// Stuff drawn normally before
// Here I draw one rect in the old way just to show the old way
// and show something on the canvas before:
ctx.beginPath();
ctx.rect(50,50,100,100);
ctx.fill();
ctx.stroke();


// Draw on can2 then draw can2 to can
ctx2.strokeStyle = 'rgba(0,0,0,0.7)';
ctx2.fillStyle = 'rgba(0,0,0,0.7)';
ctx2.lineWidth = 10;
ctx2.beginPath();
ctx2.rect(50,250,100,100);
ctx2.globalCompositeOperation = 'destination-atop';
ctx2.fill();
ctx2.stroke();

ctx.drawImage(can2, 0, 0);

【讨论】：

不幸的是，JSFiddle 给了我一个 404 但我尝试更改复合模式，它似乎工作。但你也是对的，我需要绘制我用来在最终形状上绘制形状的“中间”画布。在 JSFiddle 恢复期间，我将尝试找到如何执行此操作:) 再次感谢！

啊，为了以防万一，我添加了小提琴中的所有代码。祝你的项目好运！

我在此期间帮助了自己：***.com/questions/4405336/…。最好向 JQuery 用户提及要在您的示例中获取 can2 所需的类型，您必须执行 $("#myCanvas").get(0).getContext('2d').canvas 。它现在就像一个魅力。再次感谢您！

这不再起作用（在 Firefox 上已经不起作用了）。我目前正在寻找替代方案。更多信息在这里：bugzilla.mozilla.org/show_bug.cgi?id=898375

【参考方案2】：

Simon 的回答当时是正确的，但现在看来 Chrome 36 已经纠正了一个影响他的解决方案的错误并且它不再有效。它已经无法在 Firefox 上运行，这似乎是预期的行为：https://bugzilla.mozilla.org/show_bug.cgi?id=898375

那么，你是如何做到这一点的呢？ 您首先需要另一个画布。 在此画布上绘制您的填充和描边形状，没有不透明度（不是颜色，也没有 globalAlpha）。 现在，在主画布上将 globalAlpha 设置为您想要的任何内容。 在主画布上绘制第一个画布。 将 globalAlpha 设置为您在主画布上的任何内容。 完成。

【参考方案3】：

2018 答案：使用context.globalAlpha

例如：context.globalAlpha = 0.2;