HTML5キャンバス
Canvas とは何ですか?
HTML5 <canvas> 要素は、スクリプト (通常は JavaScript) を通じて実行されます。
キャンバス (キャンバス) 上に赤い四角形、グラデーションの四角形、色を描畫します。長(zhǎng)方形といくつかの色付きのテキスト。
<canvas> タグは単なるグラフィック コンテナであり、グラフィックを描畫するにはスクリプトを使用する必要があります。
Canva を使用すると、さまざまな方法でパス、ボックス、円、文字を描畫したり、畫像を追加したりできます。
ブラウザのサポート
Internet Explorer 9 以降、Firefox、Opera、Chrome、Safari は <canvas> 要素をサポートします。注
: Internet Explorer IE バージョン 8 以前のブラウザは、<canvas> 要素をサポートしていません。 キャンバス (キャンバス) を作成します。キャンバスは、<canvas> を通じて描畫される、Web ページ內(nèi)の長(zhǎng)方形のボックスです。 element .
注: デフォルトでは、<canvas> 要素には境界線とコンテンツがありません。 <canvas> 簡(jiǎn)単な例は次のとおりです:
<canvas id="myCanvas" width="200" height="100"></canvas>
注:通常、タグは必須です。 id 屬性 (スクリプトでよく參照される)、幅と高さの屬性で定義されるキャンバスのサイズを指定します。ヒント: HTML ページで複數(shù)の <canvas> 要素を使用できます
style 屬性を使用して境界線を追加します:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php.cn</title> </head> <body> <canvas id="myCanvas" width="200" height="100" style="border:1px solid #28c9b6;"> 您的瀏覽器不支持 HTML5 canvas 標(biāo)簽。 </canvas> </body> </html>プログラムを?qū)g行して試してください
JavaScript を使用してimage
Canvas 要素自體には描畫機(jī)能がありません。すべての描畫作業(yè)は JavaScript 內(nèi)で行う必要があります:例
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php.cn</title> </head> <body> <canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;"> 您的瀏覽器不支持 HTML5 canvas 標(biāo)簽。 </canvas> <script> var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); ctx.fillStyle="#FF0000"; ctx.fillRect(0,0,150,75); </script> </body> </html>プログラムの実行結(jié)果:
分析の例:
まず、<canvas> 要素を見(jiàn)つけます:次に、コンテキスト オブジェクトを作成します:var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
getContext(" 2d ") オブジェクトは、パス、四角形、円、文字を描畫し、畫像を追加するためのさまざまなメソッドを備えた組み込みの HTML5 オブジェクトです。
次の 2 行のコードは、赤い四角形を描畫します:可能な fillStyle 屬性を設(shè)定します。 CSS カラー、グラデーション、またはパターン。 fillStyle のデフォルト設(shè)定は #000000 (黒) です。 fillRect(x,y,width,height) メソッドは、四角形の現(xiàn)在の塗りつぶし方法を定義します。ctx.fillStyle="#FF0000";ctx.fillRect(0,0,150,75);
キャンバス座標(biāo)
キャンバスは2次元グリッドです。 キャンバスの左上隅の座標(biāo)は(0,0)です上記のfillRectメソッドにはパラメータ(0,0,150,75)があります。 意味: キャンバス上に左上隅 (0,0) から開(kāi)始して 150x75 の長(zhǎng)方形を描畫します。 座標(biāo)例 以下の図に示すように、キャンバスの X 座標(biāo)と Y 座標(biāo)を使用して、キャンバス上に絵畫を配置します。マウスを移動(dòng)した四角枠上に位置座標(biāo)が表示されます。
Canvas - パス
Canvas 上に線を描くには、次の 2 つのメソッドを使用します:
moveTo(x,y) で線を定義 開(kāi)始座標(biāo)
lineTo(x, y) 線を定義します終了座標(biāo)
線を描くには、ストローク()と同じように、「ink」メソッドを使用する必要があります。
例
開(kāi)始座標(biāo)(0,0)を定義します、および終了座標(biāo) (200,100 ) を使用して線を描畫します:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php.cn</title> </head> <body> <canvas id="myCanvas" width="200" height="100" style="border:1px solid #d31029;"> 您的瀏覽器不支持 HTML5 canvas 標(biāo)簽。</canvas> <script> var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); ctx.moveTo(0,0); ctx.lineTo(200,100); ctx.stroke(); </script> </body> </html>プログラムの実行結(jié)果:
キャンバスに円を描畫するには、次のメソッドを使用します:
arc(x, y, r, start, stop)
実際、円を描くときは、stroke() や fill() などの「ink」メソッドを使用します。例
arc() メソッドを使用して円を描畫します:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php.cn</title> </head> <body> <canvas id="myCanvas" width="200" height="100" style="border:1px solid #1d17ff;"> 您的瀏覽器不支持 HTML5 canvas 標(biāo)簽。</canvas> <script> var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); ctx.beginPath(); ctx.arc(95,50,40,0,2*Math.PI); ctx.stroke(); </script> </body> </html>プログラムの実行結(jié)果:
Canvas - Text
Canvas を使用してテキストを描畫します。 重要な屬性とメソッドは次のとおりです。
フォント- フォントを定義します
fillText( text,x,y) - キャンバス上に実線のテキストを描畫します
ストロークText(text,x,y) - キャンバス上に白抜きのテキストを描畫します
例
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php.cn</title> </head> <body> <canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;"> 您的瀏覽器不支持 HTML5 canvas 標(biāo)簽。</canvas> <script> var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); ctx.font="30px Arial"; ctx.fillText("Hello World",10,30); ctx.strokeText("你好嗎！",10,80); </script> </body> </html>プログラム実行結(jié)果:
キャンバス - グラデーション
グラデーションは、長(zhǎng)方形、円、線、テキストなどで塗りつぶすことができます。さまざまな形狀を異なる色で定義できます。
キャンバスのグラデーションを設(shè)定するには 2 つの異なる方法があります:
createLinearGradient(x,y,x1,y1) - 線のグラデーションを作成します
createRadialGradient(x,y,r,x1,y1,r1) ) - 放射狀/円形のグラデーションを作成します
グラデーション オブジェクトを使用するときは、2 つ以上のストップ カラーを使用する必要があります。
addColorStop()このメソッドは、カラーストップを指定します。パラメータは、0から1の座標(biāo)で記述されます。
グラデーションを使用し、fillStyleまたはストロークスタイルの値をグラデーションに設(shè)定して、形狀を描畫します。 、四角形、テキスト、線など。
インスタンス
createLinearGradient() を使用して線形グラデーションを作成します。長(zhǎng)方形をグラデーションで塗りつぶします:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php.cn</title> </head> <body> <canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;"> 您的瀏覽器不支持 HTML5 canvas 標(biāo)簽。</canvas> <script> var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); // 創(chuàng)建漸變 var grd=ctx.createLinearGradient(0,0,200,10); grd.addColorStop(0,"red"); grd.addColorStop(1,"white"); // 充滿度 ctx.fillStyle=grd; ctx.fillRect(10,10,150,80); </script> </body> </html>プログラムの実行結(jié)果:
例
createRadialGradient() を使用して、放射狀/円形のグラデーションを作成します。長(zhǎng)方形をグラデーションで塗りつぶします:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>php中文網(wǎng)(php.cn)</title> </head> <body> <canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;"> 您的瀏覽器不支持 HTML5 canvas 標(biāo)簽。</canvas> <script> var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); // Create gradient var grd=ctx.createRadialGradient(75,50,5,90,60,100); grd.addColorStop(0,"red"); grd.addColorStop(1,"white"); // Fill with gradient ctx.fillStyle=grd; ctx.fillRect(10,10,150,80); </script> </body> </html>プログラムの実行結(jié)果:
Canvas - 畫像
キャンバスに寫真を置くことができるので、寫真上で操作を行ったり、テキストなどの必要な素材を追加したりできます。
畫像をキャンバスに配置します次のメソッドを使用します:
drawImage(image,x,y)
畫像を使用する
例
1つ入れてください畫像がキャンバスに配置されます:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>php中文網(wǎng)(php.cn)</title> </head> <body> <p>使用圖像:</p> <img id="scream" src="http://img.blog.163.com/photo/g8yDNFsGMeq-pzHY2_n3aQ==/356628795492853826.jpg" alt="The Scream" width="220" height="277"><p>畫布:</p> <canvas id="myCanvas" width="250" height="300" style="border:1px solid #d3d3d3;"> 您的瀏覽器不支持 HTML5 canvas 標(biāo)簽。</canvas> <script> var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); var img=document.getElementById("scream"); img.onload = function() { ctx.drawImage(img,10,10); } </script> </body> </html>プログラムの実行結(jié)果:
HTML Canvas Reference Manual
タグの完全なプロパティは Canvas Reference Manual にあります。 .
HTML <canvas> タグ<canvas>
HTML5 の Canvas 要素の使用法 JavaScript は Web ページ上に畫像を描畫します。
