Javascript 使用paper JS将图像添加到画布

我使用普通javascript将图像添加到画布，下面是代码

var canvas = document.getElementById('canvas');
context = canvas.getContext('2d');

canvas_image();

function canvas_image(){
    can_img = new Image();
    can_img.src = 'Chrysanthemum.jpg';
    can_img.onload = function(){
    context.drawImage(can_img, 100, 100);   
    }
}

如何使用paperJS库将图像添加到画布？

引用：

将图像添加到Paper.js项目时，需要已经加载图像。使用本地图像或其他网站上托管的图像可能会在某些浏览器上引发安全异常

因此，您需要一个图像，最好是：

然后，您可以像这样重新定位、缩放或旋转：

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

// Scale the raster by 50%
raster.scale(0.5);

// Rotate the raster by 45 degrees:
raster.rotate(45);

---

这里有一个可以使用的工具。

首先，如果您想直接使用JavaScript，请查看。 一旦您理解了它，您就可以像这样在光栅中加载图像了

paper.install(window);
window.onload = function() {
    // Setup directly from canvas id:
    paper.setup('myCanvas');
    var raster = new paper.Raster({source: 'Chrysanthemum.jpg', position: view.center});
}

---

PaperJS提供教程。你们看到了吗？是的，我提到过，但我找不到在画布上添加图像。是否可以将图像添加到画布，而不使用paperJS中的图像标记，如上所述

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

// Scale the raster by 50%
raster.scale(0.5);

// Rotate the raster by 45 degrees:
raster.rotate(45);

paper.install(window);
window.onload = function() {
    // Setup directly from canvas id:
    paper.setup('myCanvas');
    var raster = new paper.Raster({source: 'Chrysanthemum.jpg', position: view.center});
}