5

通常の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ライブラリを使用してキャンバスに画像を追加するにはどうすればよいですか?

4

2 に答える 2

10

ラスターに関する paperjs.org チュートリアルからの引用:

画像が Paper.js プロジェクトに追加されるとき、画像は既に読み込まれている必要があります。ローカルの画像または他の Web サイトでホストされている画像を操作すると、特定のブラウザーでセキュリティ例外がスローされる場合があります。

したがって、できれば視覚的に隠されている場所に画像が必要です。

<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 のスケッチがあります。

于 2014-01-25T01:45:31.767 に答える
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});
}
于 2015-06-18T22:14:45.117 に答える