画布绘图工具

Question

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

我尝试这样的链接

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

我已经将您的jsFiddle分支了，但是我对颜色和alpha透明度做了一些修改，以获得与您的图像相同的颜色（ish）：

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

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

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