Javascript 如何将paper.js应用于简单的html页面？_Javascript_Html_Paperjs

Javascript 如何将paper.js应用于简单的html页面？

javascript html

Javascript 如何将paper.js应用于简单的html页面？,javascript,html,paperjs,Javascript,Html,Paperjs,我尝试了paper.js中的几种不同方法，但我甚至无法在我的计算机上成功运行一个简单的示例。我想知道我的配置或理解是否有问题 <!DOCTYPE html> <html> <head> </head> <body> <canvas id="myCanvas" resize></canvas> <img id="mona" src="bastion.png"> <!-- Load

我尝试了paper.js中的几种不同方法，但我甚至无法在我的计算机上成功运行一个简单的示例。我想知道我的配置或理解是否有问题

<!DOCTYPE html>
<html>
<head>
</head>
<body>
    <canvas id="myCanvas" resize></canvas>
  <img id="mona" src="bastion.png">
  <!-- Load the Paper.js library -->
  <script type="text/javascript" src="paper-full.js"></script>
  <!-- Define inlined PaperScript associate it with myCanvas -->
  <script type="text/paperscript" canvas="myCanvas">
      // Create a raster item using the image tag with id='mona'
      var raster = new Raster('mona');

      // Move the raster to the center of the view
      raster.position = view.center;

      // Create a circle shaped path at {x: 50, y: 50}
      // with a radius of 30:
      var path = new Path.Circle({
        center: [50, 50],
        radius: 30,
        strokeColor: 'white'
      });

      function onMouseMove(event) {
        // Set the fill color of the path to the average color
        // of the raster at the position of the mouse:
        path.fillColor = raster.getAverageColor(event.point);
      }
  </script>
</body>
</html>


//使用id='mona'的图像标记创建光栅项目
var光栅=新光栅（'mona'）；
//将光栅移动到视图的中心
graster.position=view.center；
//在{x:50，y:50}处创建圆形路径
//半径为30：
var path=新路径。圆({
中间：[50,50]，
半径：30，
strokeColor:“白色”
});
mouseMove函数（事件）{
//将路径的填充颜色设置为平均颜色
//鼠标位置处光栅的位置：
path.fillColor=graster.getAverageColor（event.point）；
}

此示例来自和。我想建立一个简单的眼药水颜色选择器有放大镜的效果

但是在我遵循文档之后，我得到的是这样的东西

我的放大镜（白色圆圈）的颜色不会改变。我对这个图书馆不熟悉，但我花了5个多小时才弄明白

非常感谢您的帮助。

在我的浏览器（Chrome 55）中，我发现以下错误：

paper-full.js:5207 Uncaught DOMException: Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The canvas has been tainted by cross-origin data.
at Raster.getAverageColor (file:///Users/jordandalton/Development/paperjs/dist/paper-full.js:5207:20)
at Tool.onMouseMove [as _onMouseMove] (<anonymous>:20:33)
at Tool.emit (file:///Users/jordandalton/Development/paperjs/dist/paper-full.js:652:20)
at emit (file:///Users/jordandalton/Development/paperjs/dist/paper-full.js:12848:19)
at Tool._handleMouseEvent (file:///Users/jordandalton/Development/paperjs/dist/paper-full.js:12861:5)
at CanvasView._handleMouseEvent (file:///Users/jordandalton/Development/paperjs/dist/paper-full.js:12314:19)
at handleMouseMove (file:///Users/jordandalton/Development/paperjs/dist/paper-full.js:12065:8)
at HTMLDocument.docEvents.(anonymous function) (file:///Users/jordandalton/Development/paperjs/dist/paper-full.js:12135:4)

我会尝试一下，虽然我已经注意到了这个问题，并试图通过使用Firefox和Safari来避免它……而且我似乎需要在本地环境中运行它，因为我正在构建一个电子应用程序。不过我还是先试试你的方法，谢谢！我从他们的网站上安装了quick start Electron应用程序，并将您的代码放到打包的HTML页面的主体中。我使用npm安装了paper，并调整了脚本的文件路径，一切都很顺利。

var raster = new Raster('bastion.png');