HTML5中填充笔划的透明度

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

那么，你如何完成这件事呢？
你首先需要另一块画布。
在画布上绘制填充和描边形状，不使用不透明度（不使用颜色，也不使用全局Alpha）。
现在，在主画布上将 globalAlpha 设置为您想要的任何值。
在主画布上绘制第一个画布。
将 globalAlpha 设置为主画布上的任何内容。
完毕。

Answer 3

2018 答案：使用 context.globalAlpha

前任 ： context.globalAlpha = 0.2;