HTML5 Canvas APIのdrawImage()メソッドの使用例_html5チュートリアルスキル

drawImage() は、画像、キャンバス、ビデオを導入し、それらを拡大縮小したりトリミングしたりできる重要なメソッドです。

表現には 3 つの形式があります:

文法 1

JavaScript コードコンテンツをクリップボードにコピーします

1. context.drawImage(img,dx,dy);

文法 2

JavaScript コードコンテンツをクリップボードにコピーします

1. context.drawImage(img,dx,dy,dw,dw);

文法 3

JavaScript コードコンテンツをクリップボードにコピーします

1. context.drawImage(img,sx,sy,sw,sh,dx,dy,dw,dh);

コーディネートスケッチを見てみましょう:

追伸: スタイル内で の幅と高さを定義しないでください。定義しないと、中に描かれた絵が自動的に拡大または縮小されます。
3 パラメータ バージョンは標準形式であり、画像、キャンバス、またはビデオをロードするために使用できます。5 パラメータ バージョンは、画像をロードするだけでなく、9 パラメータの指定された幅と高さに画像を拡大縮小することもできます。バージョンは、スケーリングに加えてトリミングすることもできます。各パラメータの意味については、次の表を参照してください。

参数	描述
img
sx	可选。开始剪切的 x 坐标位置。
sy	可选。开始剪切的 y 坐标位置。
swidth	可选。被剪切图像的宽度。
sheight	可选。被剪切图像的高度。
x	在画布上放置图像的 x 坐标位置。
y	在画布上放置图像的 y 坐标位置。
width	可选。要使用的图像的宽度。（伸展或缩小图像）
height	要使用的图像的高度。（伸展或缩小图像）

次に、画像を読み込んでみましょう。

JavaScript コードコンテンツをクリップボードにコピーします

2. "zh">
4. "UTF-8">
body {background: url(
7. "./images/bg3.jpg") 繰り返し }
8. #canvas { ボーダー: 1px ソリッド #aaaaaa; 表示: ブロック; マージン: 50px 自動; }
12. "キャンバスワープ"> <キャンバス id=
13. "キャンバス"> あなたのブラウザは Canvas をサポートしていませんか? ！早く変えてください！ ！

<スクリプト>

window.onload =

function(){

var Canvas = document.getElementById("canvas"); Canvas.width = 800;

Canvas.height = 600;

var

context = Canvas.getContext("2d"); context.fillStyle = "#FFF";

context.fillRect(0,0,800,600);

var

img = new

Image(); img.src = "./images/20-1.jpg"; img.onload = function

(){ context.drawImage(img,200,50);

};

実行結果:

フォト フレームを作成します:
ここでは、clip()、drawImage()、および 3 次ベジェ曲線 bezierCurveTo() を組み合わせて、上記のケースにハート型のフォト フレームを追加します~

JavaScript コードコンテンツをクリップボードにコピーします

1.   
2. "zh">   
3.   
4.     "UTF-8">   
5.        
6.        
7.   
8.   
9. "canvas-warp">   
10.     "canvas">   
11.         你的浏览器居然不支持Canvas？！赶快换一个吧！！   
12.        

  

<スクリプト>   

window.onload = 関数(){

var canvas = document.getElementById("canvas");   

canvas.width = 800;   

canvas.height = 600;   

var context = canvas.getContext("2d");   

context.fillStyle = "#FFF";   

context.fillRect(0,0,800,600);   

context.beginPath();   

context.moveTo(400,260);   

context.bezierCurveTo(450,220,450,300,400,315);   

context.bezierCurveTo(350,300,350,220,400,260);   

context.clip();   

context.closePath();   

var img = new Image();   

img.src = "./images/20-1.jpg";   

img.onload = 関数(){

context.drawImage(img,348,240,100,100);   

}

};   

  

  

  

运行結果：

は美しくありませんか? 良いですね、これまでのところ最も重要な遮蔽と画像裁断、および完了です。java.awt では、drawImage() も重要なメソッドの 1 つです。 drawImage() を使用すると、キャンバス上で世界中を呼び出すこともできます。重要な処理方法。