Javascriptを実装描画キャンバス - 2D図面を充填し、撫で四角形を描きます

実現を描画キャンバス：

<キャンバス>要素は、グラフィックスが動的にJSで、この地域でのレンダリング、ページ上の領域を設定する責任があります。

IE9 +、Firefox1.5 +、Safari2 + 、Opera9 +、クロム、IOSのAndroidのWebKitのとSafariのバージョンすべてのサポートある程度の<canvas>要素。

1、基本的な使い方

（1）HTMLコード部分

。1  / *幅と高さが描画領域のサイズを指定する属性* /
 2  < キャンバスのID =「ピクチャー」幅=「200」高さ=「200は」> 
。3 / *ラベルの間の内容はブラウザをサポートしていません< キャンバス> 表示要素* /
 。4      Aピクチャーアップルについて。
 。5  </ キャンバス>

<canvas>は要素対応するDOM要素を自由に変更することができ、幅と高さの特性を有します。

あなたが任意のスタイルを追加しないか、その要素を見ることができないページ上の任意のグラフィックスを描画しない場合は、CSSによるスタイルを追加することができます。

（2）コードのJS部分を

1枚の VARの写真=のdocument.getElementById（ "画像" ）;
 2  // ブラウザを決定するサポートの<canvas>要素
。3  IF （picture.getContext）{
 4      // 取得した描画コンテキストオブジェクト
。5      VARのコンテキスト= picture.getContext（ "2D" ）;
 6      // ... 
7 }

画像（3）の<canvas>要素に描かれた導き出します

1  VARの写真=のdocument.getElementById（ "画像" ）;
 2  // 決定ブラウザは<キャンバス>要素を支持する
。3  IF （picture.getContext）{
 4つの     // URLの取得した画像データ
。5      VAR imgUrl picture.toDataURL =（「イメージ/ PNG " ）;
 6      // 表示画像
7。     // 画像を作成するために、パラメータとして任意の適切なコンテキストを画像MIMEタイプフォーマットを受信するためのtoDataURL方法
8。     VARの画像=のdocument.createElement（" IMG」）
 。9      のimage.src = imgUrl;
 10      document.body.appendChild（イメージ）;
 11 }

（特に指定のない限り）デフォルトでは、ブラウザは、PNG画像フォーマットとして符号化されます。

FirefoxとOperaはまた、「画像/ JPEG」パラメータに基づいて、JPEGの符号化形式をサポートしています。

注：異なるドメインから引き出されたキャンバス上の画像は、toDataURL（）メソッドがエラーをスローします。

2、塗りと線

例えば矩形のような単純な2Dグラフィックス、および弓状経路を描くことができ、2D描画コンテキスト・プロバイダを使用する方法。2Dコンテキストは、左上隅の座標を原点座標（0、0）、<キャンバス>要素から始まります。すべての座標値を原点Y上、右にさらにxの値、より大きな値に基づいて算出します。

塗りつぶし：（色、勾配、または画像）パターン指定されたスタイルで満たされています。

ストローク：ちょうどグラフのエッジで線を引きます。

結果は、塗りつぶしとストローク操作は、二つの性質に依存しますのfillStyleとstrokeStyle。プロパティの値は、文字列、勾配およびパターン、オブジェクトをオブジェクトであってもよいし、デフォルト値は「＃000000」であります色名、六角、RGB、RGBA、HSL及びHSLA：あなたは色の値を表す文字列を指定すると、CSSカラー値で指定された任意の形式を使用することができます。

1枚の VARの写真=のdocument.getElementById（ "画像" ）;
 2  // ブラウザを決定するサポートの<canvas>要素
。3  IF （picture.getContext）{
 4      // 取得した描画コンテキストオブジェクト
。5      VARのコンテキスト= picture.getContext（ "2D" ）;
 6      context.strokeStyle = "赤";     // 側が赤である
7。      context.fillStyle = "＃0000FF";   // 青に色塗りつぶし
8 }

3.四角形を描画

唯一の矩形が2次元状の文脈で直接描画することができるです。

方法に関連する矩形を描画：

　　fillRect（） ：キャンバスに描画された矩形が指定された色、属性のfillStyleによって指定された色で塗りつぶされます。

　　strokeRect（） ：キャンバスに描画された矩形、指定された色strokeStyleストロークと属性で指定された色。

　　clearRect（） ：キャンバス上の明確な矩形領域は、矩形描画されたコンテキストの領域は透明になります。

この方法は、（ピクセル単位）は、3つの以上の四つのパラメータを受信します。

　　矩形のX座標、
　　矩形は、Y座標、
　　矩形の幅、
　　矩形の高さ。

1枚の VARの写真=のdocument.getElementById（ "画像" ）;
 2  // ブラウザを決定するサポートの<canvas>要素
。3  IF （picture.getContext）{
 4      // 取得した描画コンテキストオブジェクト
。5      VARのコンテキスト= picture.getContext（ "2D" ）;
 6  
7。     // 赤い長方形、ピンクストロークを描く、座標（10,10）から図、幅及び50個のピクセルの高さを始める
8。      context.fillStyle = "＃1 FF0000" ;
 9      context.strokeStyle = "ピンク" 。
 10      context.fillRect（10、10、50、50 ）;
 11  
12である     // 青い長方形描か半透明、黄色ストローク、第二矩形上記第一の描画矩形
13     = context.fillStyle "RGBA（0,0,255,0.5）" ;
 14      context.strokeStyle = "＃1 00FF00" ;
 15      context.fillRect（30、30、50、50 ）;
 16  
17      // 二つに重なる矩形小さな矩形をクリア、透明になる
18がある      context.clearRect（40、40、10、10 ）;
 19 }

脳卒中に関連するプロパティを設定します。

　　線幅特性：ストローク制御線の幅は、任意の整数であってもよいです。
　　このlinecapの特性：ライン端部の形状を制御すること平坦、丸い又は四角いヘッド（「バット」、「ラウンド」又は「正方形」）です。
　　たlineJoin特性：円形の横断道と交差する制御線、斜めまたはマイター（「ラウンド」、「ベベル」または「マイター」）。

Javascriptを実装描画キャンバス - 2D図面を充填し、撫で四角形を描きます

おすすめ