HTML5 Canvas_html5 チュートリアル スキルの使用方法

canvas 要素は JavaScript を使用して Web ページ上に画像を描画しますが、描画機能はありません。

キャンバスは、ピクセルごとに制御できる長方形の領域です。

キャンバスには、パス、長方形、円、文字を描画したり、画像を追加したりするためのさまざまな方法があります。

いくつかの例を示します:

1. キャンバスを塗りつぶします

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

1. "myCanvas" 幅="200" 高さ="100" style="border:1px 単色赤;">
2. "text/javascript">
3. var c=document.getElementById("myCanvas");
4. var cxt=c.getContext("2d"); cxt.fillStyle="#ccc"
5. ; cxt.fillRect(5,10,150,60); //x, y, x, y
8. 次のように実行します:

2. 座標を取得します

JavaScript コード

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

"text/javascript"

>
1. 関数 cnvs_getCoowned(e){
2. x=e.clientX; y=e.clientY
3. document.getElementById(
4. "xy座標").innerHTML=
5. "座標: (" x "," y ")"; 関数 cnvs_clearCoowned(){
6. document.getElementById("xy座標").innerHTML=""
7. ;}
8. XML/HTML コードコンテンツをクリップボードにコピー

1. div id="coordiv" スタイル="float:left;width:199px;height:99px;border:1pxsolid #c3c3c3" onmousemove="cnvs_getCoowned(event)" onmouseout="cnvs_clearCoowned()">div>
2. div id="xy座標" >div>

次のように実行します:

3. 線とグラフィックを描画します

1) 次のように正方形を描きます。

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

1. "myCanvas" 幅="200" 高さ="100" style="border:1px Solid #c3c3c3;">
2. お使いのブラウザは
タグをサポートしていません。
3. キャンバス>
5. "text/javascript">
7. var c=document.getElementById("myCanvas");
8. var cxt=c.getContext("2d"); cxt.moveTo(10,10);
//x,y 開始点
9. cxt.lineTo(10,50);
//x,y
10. cxt.lineTo(50,50);
//x,y
11. cxt.lineTo(50,10);
//x,y
12. cxt.lineTo(10,10);
//x,y
13. cxt.ストローク();
以下のように実行します

2) 次のように円を描きます:

JavaScript コード

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

1. "myCanvas" 幅="200" 高さ="100" style="border:1px Solid #c3c3c3;">
2. お使いのブラウザはキャンバスをサポートしていません
3. キャンバス>
5. "text/javascript">
6. var c=document.getElementById("myCanvas");
7. var cxt=c.getContext("2d"); cxt.fillStyle=
"#ccc"
8. ; cxt.beginPath();
cxt.arc(20,20,10,0,Math.PI*2,
9. true
);
10. cxt.closePath(); cxt.fill();
次のように実行します:

4. グラデーションを描画します

JavaScript コード

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

"myCanvas"

幅=

1. "200" 高さ="100" style="border:1px Solid #c3c3c3;"> お使いのブラウザは タグをサポートしていません。 キャンバス>
"text/javascript"
4. >
5. var c=document.getElementById(
"myCanvas"
6. ); var cxt=c.getContext("2d"
);
7. var grd=cxt.createLinearGradient(0,0,175,50); grd.addColorStop(0,"#000000"
);
8. //黒
grd.addColorStop(1,
9. "#FFFFFF"); //白
cxt.fillStyle=grd
10. cxt.fillRect(5,10,175,50);//x,y,x,y
12. 次のように実行します:
14. 5. 写真

JavaScript コード

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

1. "myCanvas" 幅="300" 高さ="200" style="border:1px Solid #c3c3c3;">
2. お使いのブラウザは
タグをサポートしていません。
3. キャンバス>
5. "text/javascript">
6. var c=document.getElementById("myCanvas");
7. var cxt=c.getContext("2d");
var
8. img=new Image() img.src=
"aa.png"
9. cxt.drawImage(img,10,20);
//x,y
実行は次のとおりです:

以上がこの記事の全内容です。皆様の学習のお役に立てれば幸いです。

原文:

http://www.cnblogs.com/LoveSuk/archive/2016/03/17/5288368.html