HTML5画布软刷

Question

在HTML5画布上绘制时，有哪些创建"soft brush"效果的不同方法？速度和效率很重要，所以如果有人对不同的方法有任何基准，那就太棒了。

为了详细说明我所说的"soft brush"是什么意思，我指的是一种笔刷，它本质上具有径向alpha透明度，因此边缘比中心更透明。

我听说过几种方法，包括绘制到内存画布和应用blur。然而，我无法想象这种方法是非常有效的。

谢谢

Answer 1

您可以尝试在线条下面添加阴影：

http://www.html5canvastutorials.com/advanced/html5-canvas-shadow-offset-tutorial/

<canvas id="myCanvas" width="578" height="200"></canvas>
<script>
  var canvas = document.getElementById('myCanvas');
  var context = canvas.getContext('2d');

  context.rect(188, 40, 200, 100);
  context.fillStyle = 'red';
  context.shadowColor = '#999';
  context.shadowBlur = 20;
  context.shadowOffsetX = 15;
  context.shadowOffsetY = 15;
  context.fill();
</script>

通过将offsets设置为0，模糊效果将由浏览器而不是您的代码完成。