HTML5 Canvas软刷

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>

通过将偏移设置为0，模糊将由浏览器而不是代码完成。