canvas 圆滑毛笔

Canvas是HTML5中提供的一种绘图API，它允许开发者在网页上动态绘制图形，包括线条、形状、文本等。如果你想在Canvas上模拟毛笔效果，特别是圆滑的笔触，通常会涉及到贝塞尔曲线（Bézier Curves）的应用。

贝塞尔曲线是一种数学曲线，特别适合描绘平滑的曲线，如毛笔笔触。在Canvas上创建圆滑毛笔笔触，你可以通过以下步骤：

1. **定义笔触样式**：使用`createLinearGradient`或`createRadialGradient`创建渐变色，模仿墨水的色泽变化。然后使用`beginPath`开始一条新的路径，并设置`lineCap`属性为`round`或`butt`，使线条端点更平滑。

const ctx = canvas.getContext('2d');
const gradient = ctx.createLinearGradient(0, 0, canvas.width, canvas.height);
gradient.addColorStop(0, 'black');
gradient.addColorStop(1, 'gray');
ctx.lineCap = 'round';

2. **绘制贝塞尔曲线**：使用`moveTo`和`quadraticCurveTo`或者`bezierCurveTo`方法，每一步都是对贝塞尔曲线的控制点进行移动。这能让你的笔触具有弧度和变化。

ctx.moveTo(x1, y1);
ctx.quadraticCurveTo(cpx1, cpy1, x2, y2); // 或者
ctx.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x2, y2);

3. **控制曲线精度和宽度**：调整`lineWidth`来改变笔触宽度，而`strokeDasharray`可以用来模拟毛笔的断续效果。

4. **渲染**：最后调用`stroke`来绘制路径，圆滑的毛笔效果就出来了。