HTML5 Canvas 事前学習メモ (11) - 簡単な画像操作

この記事では簡単な画像の操作を紹介します。まず簡単な画像の表示です

その効果は次のとおりです:

Webページ上に簡単なjpg形式の画像を表示することです。実装は簡単です。 非常に簡単です。コードは次のとおりです。

var image = new Image();
image.src = "icon.jpg";
image.onload = function(){
 context.drawImage(image,50,50);
}

まず Image オブジェクトを作成し、次に src オブジェクトの src 属性を、image オブジェクトの相対パスに設定します。画像を読み込み、最後に

onload

を書き換えて、画像を読み込んでから表示する方法です。

以下は、描画したグラフィックを画像にエクスポートする方法の紹介です:

実際には、主にコードを見てみましょう。コードは以下の通りです: ストロークの

context.beginPath();
context.moveTo(50,200);
//context.lineTo(50,250);
context.bezierCurveTo(100,100,150,300,200,200);
context.closePath();
context.stroke();
var dataURL = canvas.toDataURL();
//document.write(dataURL);
var output = new Image();
output.src = dataURL;
output.onload = function(){
context.drawImage(output,20,150);
}

その後、canvasのtoDataURL関数を使用して、以前に描画したものをデータ

url

としてエクスポートします。

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA+8AAAKlCAYAAAC6zt2bAAAgAElEQVR4Xu3dfcj2d1kG8.....

他にもたくさんあります。要するに、それらを画像に変換し、これらのいくつかの文を通じてエクスポートして表示できるようにしました。

var output = new Image();
output.src = dataURL;
output.onload = function(){
   context.drawImage(output,20,150);
}

上記は、「Html5 Canvas 事前学習ノート (11) - 簡単な画像操作」の内容です。その他の関連コンテンツについては、PHP 中国語 Web サイト (www.php.cn) をご覧ください。

🎜🎜🎜🎜