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 tutorial on rasters：

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

所以你需要一个最好是visually hidden的图像：

<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 sketch。

Answer 2

首先，如果您想直接使用JavaScript，请查看this tutorial。一旦你理解了它，就会有类似的东西在栅格中加载图像

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});
}

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

2 个答案: