绘制画架径向渐变笔画答案

【问题标题】：Drawing easeljs radial gradient strokes绘制画架径向渐变笔画
【发布时间】：2014-07-06 06:38:57
【问题描述】：

我正在尝试实现一些更精美的画布绘图，例如看起来更像笔触的东西。我遇到了很棒的资源 (http://perfectionkills.com/exploring-canvas-drawing-techniques/)，但我在将其转换为适用于 easeljs 的语法时遇到了一些麻烦。

原始示例：http://codepen.io/kangax/pen/FdlHC

我的尝试：http://codepen.io/mcfarljw/pen/Jifzk

var currentPoint = { x: event.stageX, y: event.stageY };
  var dist = distanceBetween(lastPoint, currentPoint);
  var angle = angleBetween(lastPoint, currentPoint);
  drawingCanvas.graphics.setStrokeStyle(5, 'round', 'round');
  for (var i = 0; i < dist; i += 5) {
    x = lastPoint.x + (Math.sin(angle) * i);
    y = lastPoint.y + (Math.cos(angle) * i);
    drawingCanvas.graphics.beginRadialGradientStroke(["#F00","#00F"], [0, 1], x, y, 5, x, y, 10)
  }
  lastPoint = currentPoint;
  stage.update();

它没有产生任何错误，但它也没有在画布上绘制任何东西。关于我做错了什么的任何指示？谢谢！

【问题讨论】：

标签： javascript html5-canvas easeljs createjs

【解决方案1】：

您的版本几乎完成了，希望您错过了实际绘制（当前部分）线的最重要部分：

drawingCanvas.graphics.moveTo(lastPoint.x, lastPoint.y);
drawingCanvas.graphics.lineTo(currentPoint.x, currentPoint.y);

如果在此处更新您的代码笔：http://codepen.io/anon/pen/fCcEJ

【讨论】：

我犯了一个愚蠢的错误，肯定会成功。我一定是忽略了一些更大的东西，因为它仍然与原始示例的漂亮画笔感觉有些不同。
我认为您无法使用beginRadialGradientStroke 实现这一目标 - 您应该像在原始示例中那样使用径向渐变填充。看看这个 fork，也许这会帮助你理解 beginRadialGradientStroke 的工作原理：codepen.io/anon/pen/bLKiI
谢谢，看来我完全忽略了使用 fillRect 的事实。