HTML5 の Canvas での一般的な描画テクニック

H5 では、グラフィックを描画するために canvas 要素をよく使用します。そこで今回はcanvasの使い方とcanvasがどのような状況で使えるのかをご紹介します。そして、キャンバス ペイントのスキル

canvas は、ページ上にグラフィックを描画するために使用されます

canvas の概要:

html5 Canvas 要素と javascript は、ページ上にグラフィックを描画するために一緒に使用されます

canvas は、キャンバスであり、パス四角形ですキャンバスに円が描かれています...

キャンバスを作成

<キャンバスID幅高さ>

キャンバス描画グラフィックス: ---》JavaScript描画

キャンバス自体は描画しません描画能力、描画作業を持っています すべては JavaScript*****

js で行われ、要素

element.getContext("2d") を取得し、HTML5 の組み込み オブジェクト を取得し、2D グラフィックスを描画し、長方形を描画します。パス、円形文字... およびその他のメソッド

cxt .fillStyle = "#ff0000"; //塗りつぶしの色を描画します

cxt.fillRect(25,10,150,75);//x,y,w,h を決定します形状 25,10 の開始点座標

注: キャンバスはサポートされていません

cxt.moveTo(10,10); 元の開始点

cxt.lineTo(150,50); 元の始点の終点は、同じ 2D グラフィックの次の直線の始点になります

長方形:

cxt.strokestyle = "＃ff0000";位置を埋める

円を描く:

1》 Html5 円の次数

2》 円を描く

cxt.arc(x,y,radius,startAngle, Endangle, その他のパラメータ (TRUE 反時計回り false 時計回り)

x, y 開始点

Radius 半径

Startangle 開始点番号

Endangle 終了点

三角形を描画

Beginpath () パス描画開始

キャンバス要素をクリアします:

Cxt.clearRect(x,y,width,height) (x,y) の幅と高さの範囲からキャンバス要素をクリアします

キャンバスの

状態を保存および復元します

保存された状態の Cxt.save( )

Cxt.restore() は、境界線と塗りつぶしの色を含む保存された状態を復元します

座標空間の移動:

使用する 使用する 使用する ‐‐ ‐ ‐ ‐ ‐‐‐‐

のオリジナル 0, 0 ---》150,150

以上が Canvas 要素の概要です。さらにエキサイティングなコンテンツについては、php 中国語 Web サイトの他の関連記事にご注目ください。

関連記事:

HTMLの

タグの使い方

HTMLドキュメントタイプ宣言の書き方

HTMLドロップダウンメニューコード

以上がHTML5 の Canvas での一般的な描画テクニックの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。