HTML5 キャンバス描画 - キャンバスを使用してグラフィックスとテキストを描画するチュートリアル HTML5 キャンバスを使用して美しい絵を描く_html5 チュートリアル スキル

HTML5火的正熱，最近有個想法也是要用到HTML的相關功能，所以也要好好學習一把。

好好看了一下Canvas的功能，感覺HTML5在客戶端互動的功能性越來越強了，今天看了一下Canvas繪圖，下邊是幾個實例，記下以備後用。

1、使用Canvas繪製直線：

 

XML/HTML Code複製內容到剪貼簿

1. html>  
2. html>  
3.     頭>  
4.         元 元 字元 字元8"
5. >       頭
6. >      樣式 類型>
  
        畫布{border:dashed 2px #CCC}   
8.     樣式>
  
9.     腳本 類型 類型 型
10. >  
11.         函數 $$(id){   
12.             return document.getElementById(id);   
13.         }   
14.         函數 pageLoad(){                var 
15. 可 = $$('can'); 可以 = $$('can'); 鎠            var 
可
16. 罐子可以
17. 罐子
            cans.moveTo(20,30);//第一個起點   
            cans.lineTo(120,90);//第二點   
19.             cans.lineTo(220,60);//第三點（以第二點為起點）                cans.lineWidth
=            cans.行程樣式 = '              罐頭.中風();   
20.         }
21. スクリプト>
22. body onload="pageLoad( );">
23. キャンバス id="できる" 幅="400px" 高さ="300px">4キャンバス>
24. ボディ>
25. html>

ここで使用する 2 つの API メソッド、moveTo と lineTo はそれぞれ線分の始点と終点の座標、変数は (X 座標、Y 座標)、ストロークスタイル、ストロークでそれぞれパス描画スタイルと描画パスです。

2. グラデーションの線を描画します

グラデーション ラインには色のグラデーション効果があります。もちろん、グラデーション スタイルはパスの方向に従うかどうかに関係なく、

XML/HTML コードコンテンツをクリップボードにコピー

1. /span>>
2. html>
3. 頭>
4. メタ charset="UTF- 8">
5. 頭>
6. スタイル タイプ="text/ css">
7. canvas{border:dashed 2px #CCC}
8. スタイル>
9. スクリプト type="text/ javascript">
10. 関数 $$(id){
11. return document.getElementById(id);   
12. }
13. function pageLoad(){
14. var できる = $$('できる');   
15. var cancans = can.getContext('2d');   
16. cans.moveTo(0,0);   
17. cans.lineTo(400,300);   
18. var gnt1 = cans.createLinearGradient(0,0,400,300);//線性渐变の起止座標
19. gnt1.addColorStop(0,'red');// 作成の開始色、0 は偏り量を示し、人は直線上の相対位置を示し、最大は 1、1 つの色に任意に書き込めます个渐变颜色
20. gnt1.addColorStop(1,' yellow');   
21. cans.lineWidth=3;   
22. cans.bloodStyle = gnt1;   
23. cans.ストローク();   
24. }
25. スクリプト>
26. body onload="pageLoad( );">
27. キャンバス id="できる" 幅="400px" 高さ="300px">4キャンバス>
28. ボディ>
29. html>

3. 長方形または正方形を描画します:

HTML4を使用すると、このような四角形の枠は背景コードでしか生成できませんでしたが、HTML5が提供するCanvas機能を利用することで簡単に描画できるようになり、HTML5のメリットは非常に高くなります。

XML/HTML コードコンテンツをクリップボードにコピー

1. /span>>
2. html>
3. 頭>
4. メタ charset="UTF- 8">
5. 頭>
6. スタイル タイプ="text/ css">
7. canvas{border:dashed 2px #CCC}
8. スタイル>
9. スクリプト type="text/ javascript">
10. 関数 $$(id){
11. return document.getElementById(id);   
12. }
13. function pageLoad(){
14. var できる = $$('できる');   
15. var cancans = can.getContext('2d');   
16. cans.fillStyle = ' yellow';   
17. cans.fillRect(30,30,340,240);   
18. }
19. スクリプト>
20. body onload="pageLoad( );">
21. キャンバス id="できる" 幅="400px" 高さ="300px">4キャンバス>
22. ボディ>
23. html>

ここでは fillRect() メソッドが使用されています。文字通りの意味から、ここでのパラメータは説明する価値がありますが、これはそうではありません。数学の座標と同じです。詳しくは

を参照してください。

ここでの X と Y は、キャンバスの左上隅を基準とした開始点から始まります。覚えておいてください。 ！

4. 単純な長方形のボックスを描画します

上記の例では、長方形のブロックを描画し、それを色で塗りつぶすことについて説明しています。この例では、塗りつぶし効果を実現せずに、単純に長方形を描画しています。

XML/HTML コードコンテンツをクリップボードにコピー

1. /span>>
2. html>
3. 頭>
4. メタ charset="UTF- 8">
5. 頭>
6. スタイル タイプ="text/ css">
7. canvas{border:dashed 2px #CCC}
8. スタイル>
9. スクリプト type="text/ javascript">
10. 関数 $$(id){
11. return document.getElementById(id);   
12. }
13. function pageLoad(){
14. var できる = $$('できる');   
15. var cancans = can.getContext('2d');   
16. cans.bloodStyle = 'red';   
17. cans.ストロークRect(30,30,340,240);   
18. }
19. スクリプト>
20. body onload="pageLoad( );">
21. キャンバス id="できる" 幅="400px" 高さ="300px">4キャンバス>
22. ボディ>
23. html>

これは非常に簡単です。上記の例と同様に、塗りつぶしをストロークに置き換えるだけです。詳細については、上の例を参照してください。

5. 線形グラデーションで長方形を描画します

グラデーションは塗りつぶしの非常に優れた効果です。例 2 と例 3 を組み合わせると、グラデーションの四角形を作成できます。

XML/HTML コードコンテンツをクリップボードにコピー

1. /span>>
2. html>
3. 頭>
4. メタ charset="UTF- 8">
5. 頭>
6. スタイル タイプ="text/ css">
7. canvas{border:dashed 2px #CCC}
8. スタイル>
9. スクリプト type="text/ javascript">
10. 関数 $$(id){
11. return document.getElementById(id);   
12. }
13. function pageLoad(){
14. var できる = $$('できる');   
15. var cancans = can.getContext('2d');   
16. var gnt1 = 缶.createLinearGradient(10,0,390,0);   
17. gnt1.addColorStop(0,'red');   
18. gnt1.addColorStop(0.5,'green');   
19. gnt1.addColorStop(1,'blue');   
20. cans.fillStyle = gnt1;   
21. cans.fillRect(10,10,380,280);   
22. }
23. スクリプト>
24. body onload="pageLoad( );">
25. キャンバス id="できる" 幅="400px" 高さ="300px">4キャンバス>
26. ボディ>
27. html>

説明する必要はありません。fillRect(X,Y,Width,Height) を覚えておいてください。

6. 円を塗りつぶします

楕円形を含む円形は広く使用されています。

XML/HTML コードコンテンツをクリップボードにコピー

1. /span>>
2. html>
3. 頭>
4. メタ charset="UTF- 8">
5. 頭>
6. スタイル タイプ="text/ css">
7. canvas{border:dashed 2px #CCC}
8. スタイル>
9. スクリプト type="text/ javascript">
10. 関数 $$(id){
11. return document.getElementById(id);   
12. }
13. function pageLoad(){
14. var できる = $$('できる');   
15. var cancans = can.getContext('2d');   
16. cans.beginPath();   
17. cans.arc(200,150,100,0,Math.PI*2,true);   
18. cans.closePath();   
19. cans.fillStyle = 'green';// 本来、ここで最初に使用されていたものは赤、截图一看，傻眼了，怕上街被愛する国人打啊，其实你懂的~~
20. cans.fill();   
21. }
22. スクリプト>
23. body onload="pageLoad( );">
24. キャンバス id="できる" 幅="400px" 高さ="300px">4キャンバス>
25. ボディ>
26. html>

ここでの arc メソッドの使用法は、arc(X,Y,Radius,startAngle,endAngle,antiwatchwise) です。これは、(円の中心の X 座標、円の中心の Y 座標、半径、開始角度 (ラジアン)、終了角度) を意味します。ラジアン、時計回りに描画するかどうか);

円弧内のパラメータの比較:

a.cans.arc(200,150,100,0,Math.PI,true);

c, cans.arc(200,150,100,0,Math.PI/2,true);

c, cans.arc(200,150,100,0,Math.PI/2,true);

d, cans.arc(200,150,100,0,Math.PI/2,false);

7. 円形ブロック

XML/HTML コードコンテンツをクリップボードにコピー

1. /span>>
2. html>
3. 頭>
4. メタ charset="UTF- 8">
5. 頭>
6. スタイル タイプ="text/ css">
7. canvas{border:dashed 2px #CCC}
8. スタイル>
9. スクリプト type="text/ javascript">
10. 関数 $$(id){
11. return document.getElementById(id);   
12. }
13. function pageLoad(){
14. var できる = $$('できる');   
15. var cancans = can.getContext('2d');   
16. cans.beginPath();   
17. cans.arc(200,150,100,0,Math.PI*2,false);   
18. cans.closePath();   
19. cans.lineWidth = 5;   
20. cans.bloodStyle = 'red';   
21. cans.ストローク();   
22. }
23. スクリプト>
24. body onload="pageLoad( );">
25. キャンバス id="できる" 幅="400px" 高さ="300px">4キャンバス>
26. ボディ>
27. html>

ここでは説明しません。上記の例と同様に、lineWidth は線の幅を制御します。

8. 円形グラデーション

XML/HTML コードコンテンツをクリップボードにコピー

1. /span>>
2. html>
3. 頭>
4. メタ charset="UTF- 8">
5. 頭>
6. スタイル タイプ="text/ css">
7. canvas{border:dashed 2px #CCC}
8. スタイル>
9. スクリプト type="text/ javascript">
10. 関数 $$(id){
11. return document.getElementById(id);   
12. }
13. function pageLoad(){
14. var できる = $$('できる');   
15. var cancans = can.getContext('2d');   
16. var gnt = cans.createRadialGradient(200,300,50,200,200,200);   
17. gnt.addColorStop(1,'red');   
18. gnt.addColorStop(0,'green');   
19. cans.fillStyle = gnt;   
20. cans.fillRect(0,0,800,600);   
21. }
22. スクリプト>
23. body onload="pageLoad( );">
24. キャンバス id="できる" 幅="800px" 高さ="600px">4キャンバス>
25. ボディ>
26. html>

ここで説明する必要があるのは、createRadialGradient メソッドです。パラメーターは (Xstart、Ystart、radiusStart、XEnd、YEnd、radiusEnd) です。つまり、グラデーションを実装するときに 2 つの円を使用します。1 つは元の円と他の円はグラデーション円です。実際、この座標と半径の制御方法は、

などの多くのスタイルを実現できます。

立体円

XML/HTML コードコンテンツをクリップボードにコピー

1. var gnt = cans.createRadialGradient(200,150,0,200,50,250);
2. gnt.addColorStop(0,'red');
3. gnt.addColorStop(1,'#333');