画布绘图工具

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

我已经分支了你的jsFiddle，但我已经修改了颜色和alpha透明度，以获得与你的图像相同的颜色（ish）：

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

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

看起来非常相似。请注意，这是我在你的jsfiddle上所做的所有改变。