颜色渐变呈现为黑色

Question

我正在尝试将 paper.js 与 javascript 直接结合使用：http://paperjs.org/tutorials/getting-started/using-javascript-directly/

并且无法使用渐变。这条线不是颜色渐变，而是看起来是黑色的。所有形状都会出现这种情况，所以我很确定我以某种方式设置 paper.js 不正确。如有任何帮助，我们将不胜感激！

这是一个示例代码块：

paper.install(window);
window.onload = function() {
    // Setup directly from canvas id:
    paper.setup('myCanvas');
  var path = new Path();
  path.strokeColor = {
          gradient: {
              stops: ['blue', 'red']
          },
          origin: new Point(350, 0),
          destination: new Point(0, 350)
      };
  path.strokeWidth = 5;
  path.add(new Point(350, 0));
  path.add(new Point(0, 350));
  
    view.draw();
}

jsfiddle: https://jsfiddle.net/3p1sr68n/2/

Answer 1

在您的示例中，您将库引用为

<script type="text/javascript" src="js/paper.js"></script>

但是 jsfiddle 不知道具有路径的本地断言：js/paper.js.

由于未加载 paper.js，因此代码段无效。

为了使其适用于 jsfiddle 环境，您可能需要包含库的 CDN 托管版本：

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/paper.js/0.12.15/paper-full.min.js"></script>

Working example in jsfiddle

或者运行您在本地主机上的原始代码片段以及托管在您本地主机上以及 js/paper.js 路径下的库。

颜色渐变呈现为黑色

Color gradient renders as black

javascript

paperjs