javascript - 使用纸张 JS 将图像添加到画布

Question

我使用普通的 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库将图像添加到画布？

Answer 1

引用paperjs.org 关于栅格的教程：

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

因此，您需要一个最好在视觉上隐藏的图像：

<img id="mona" class="visuallyhidden" src="mona.jpg" width="320" height="491">

PaperScript代码可能如下所示：

// 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;

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

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

这是一个可以玩的paperjs.org 草图。

Answer 2

首先，如果您想直接使用 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});
}