html - HTML5 中填充笔划的透明度

Question

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

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

你应该能够在这个沙盒中看到我在说什么。

Answer 1

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

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

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

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

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

HTML：

<canvas id="canvas1" width="500" height="500"></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);

Answer 2

2018年答案：使用context.globalAlpha

前任 ：context.globalAlpha = 0.2;

Answer 3

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

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