我正在研究
HTML5中的涂鸦应用程序,我想做一些桶功能.我们的想法是绘制一条路径,它将被关闭并填充所选颜色(笔划的颜色).它适用于纯色,但如果我想要一个透明的笔触和填充,我会遇到这个问题：
http://imgur.com/0N3MW
发生的是填充完成直到笔划的中间(路径的实际采样点),因此在形状内部的行程大小的一半线是较暗的,因为它是填充和笔划的交点.
你看到了解决方法吗？
不幸的是,我现在无法发布到JSfiddle,因为它处于READ ONLY模式.但你应该能够看到我在谈论这个沙盒中的内容：http://bit.ly/AbaMLl
(网站和图书馆与我正在使用的内容无关,它只是我发现的帆布沙箱)
任何想法/主角欢迎:)
解决方法
当然,使用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.7)';
ctx.fillStyle = 'rgba(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.7)';
ctx2.fillStyle = 'rgba(0,0.7)';
ctx2.linewidth = 10;
ctx2.beginPath();
ctx2.rect(50,250,100);
ctx2.globalCompositeOperation = 'destination-atop';
ctx2.fill();
ctx2.stroke();
ctx.drawImage(can2,0);