简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
ホームページ
記事
に質問
コース
特集
ダウンロード
ゲーム
辞書
最近の更新

ホームページ  >  記事  >  ウェブフロントエンド  >  HTML5 キャンバス描画 - キャンバスを使用してグラフィックスとテキストを描画するチュートリアル HTML5 キャンバスを使用して美しい絵を描く_html5 チュートリアル スキル

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

WBOY
WBOYオリジナル
2016-05-16 15:46:301700ブラウズ

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

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

1、使用Canvas繪製直線：


 

XML/HTML Code複製內容到剪貼簿
  1. html>  
  2. html>  
  3.     頭>  
  4.         元 元 字元 字元8"
  5. >       頭
  6. >      樣式 類型>
    7.   
    8.         畫布{border:dashed 2px #CCC}   
  8.     樣式>
    9.   
  9.     腳本 類型 類型 型
  10. >  
  11.         函數 $$(id){   
  12.             return document.getElementById(id);   
  13.         }   
  14.         函數 pageLoad(){                var 
  15. 可 = $$('can'); 可以 = $$('can'); 鎠            var 
    16. 可
  16. 罐子可以
  17. 罐子
    18.             cans.moveTo(20,30);//第一個起點   
    19.             cans.lineTo(120,90);//第二點   
  19.             cans.lineTo(220,60);//第三點（以第二點為起點）                cans.lineWidth
    20. =            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. >
  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. >
  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. >
  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. >
  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. >
  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. >
  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. >
  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');
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：html5 DeviceOrientation_html5 チュートリアル スキルに基づいて WeChat シェイク機能を実装する次の記事：html5 DeviceOrientation_html5 チュートリアル スキルに基づいて WeChat シェイク機能を実装する

関連記事

続きを見る