javascript - Canvas 绘图工具

Question

如何在 Canvas 上获得与下图所示相同的效果(来源: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。