2

What are the different methods of creating a "soft brush" effect when drawing on an HTML5 canvas? Speed and efficiency is important so if anyone has any benchmarks on the different methods, that would be awesome.

To elaborate on what I mean by a "soft brush", I mean a brush that has essentially a radial alpha transparency on it so that the edges are more transparent than the center.

I've heard several methods, including painting to a memory canvas and applying a blur. However, I can't imagine that this approach is very efficient.

Thanks

4

1 回答 1

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

于 2013-07-27T15:34:41.237 回答