Question

我正在研究HTML5中的涂鸦应用程序，我想做一些桶功能。我们的想法是绘制一条路径，它将被关闭并填充所选颜色（笔划的颜色）。它适用于纯色，但如果我想要一个透明的笔触和填充，我会遇到这个问题：http://imgur.com/0N3MW

填充完成直到笔划的中间（路径的实际采样点），因此在形状内部的行程大小的一半线是较暗的，因为它是填充和中风。

你看到了解决方法吗？

不幸的是，我现在无法发布到JSFiddle，因为它处于READ ONLY模式。但你应该能够在这个沙箱中看到我正在谈论的内容：http://bit.ly/AbaMLl （网站和图书馆与我正在使用的内容无关，它只是我发现的帆布沙箱）

任何想法/主角欢迎：）

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

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

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

Answer 3

2018年答案：使用context.globalAlpha

ex：context.globalAlpha = 0.2;

HTML5中填充笔划的透明度

3 个答案: