画布绘图工具

Question

如何在画布上获得如下图所示的相同效果(来源：here)

​

我尝试像这样的LINK

e.preventDefault();
var x =  e.pageX;
var y =  e.pageY;
if (!drawing) return
ctx.beginPath();
ctx.globalAlpha = .3;
ctx.lineJoin ='round';
ctx.lineCap = 'butt'
ctx.shadowBlur = 0;
//ctx.globalCompositeOperation = "copy";
ctx.moveTo(prev.x, prev.y);
ctx.strokeStyle = '#000';
//ctx.strokeStyle = 'rgba(100,0,0,0.1)';
ctx.lineTo(x, y);
ctx.lineWidth = 20;
ctx.stroke();
ctx.closePath();
prev.x = x;
prev.y = y;

Answer 1

看起来你几乎达到了你想要的效果。

(半透明的、重叠的圆角笔触，不透明度在它们重叠的地方累积)。

尝试将globalAlpha更改为.03而不是.3。

Answer 2

http://jsfiddle.net/rsc8k/2/

ctx.globalAlpha = .1;
ctx.strokeStyle = '#337799';

看起来很像。请注意，这就是我对jsfiddle所做的所有更改。