javascript - HTML5 Canvas 软笔刷

Question

在 HTML5 Canvas 上绘图时，创建“软刷” 效果的不同方法有哪些？速度和效率很重要，所以如果有人对不同的方法有任何基准，那就太棒了。

为了详细说明我所说的 “软画笔” 的意思，我指的是基本上具有径向 alpha 透明度的画笔，因此边缘比中心更透明。

我听说过几种方法，包括在内存 Canvas 上绘画和应用模糊。但是，我无法想象这种方法非常有效。

谢谢

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，模糊将由浏览器而不是您的代码完成。