プログラミングHTML5キャンバスAPI

著者：Eve Cole 更新時間：2025-04-04 20:48:02

試す

{

document.createElement（ "canvas"）。getContext（ "2d"）;

document.getElementById（ "support"）。innerhtml = "ok";

}

キャッチ（e）

{

document.getElementById（ "support"）。innerhtml = e.message;

}

</script>

キャンバスに参加します

<キャンバスID =対角線スタイル=ボーダー：1pxソリッドブルー;幅= 200高さ= 200/>

//キャンバス要素とその描画コンテキストを取得しますvar canvas = document.getElementById（ "Diagonal"）;

var context = canvas.getContext（ "2d"）;

//絶対座標を持つパスを作成します

context.beginpath（）;

Context.Moveto（70、140）;

Context.lineto（140、70）;

//この行をキャンバスに描きます

context.stroke（）;

変身

上記と同じ効果は、変換（スケーリング、翻訳、回転）などを通じて達成できます。

変換によって斜めの線を描きます

//キャンバス要素とその描画コンテキストを取得します

var canvas = document.getElementById（ "Diagonal"）;

var context = canvas.getContext（ "2d"）;

//現在の図面ステータスを保存します

context.save（）;

//図面コンテキストを右下に移動します

Context.Translate（70、140）;

//出発点として原点を持つ前のセグメントと同じ線セグメントを描く

context.beginpath（）;

Context.Moveto（0、0）;

Context.lineto（70、-70）;

context.stroke（）; context.restore（）;

パス

HTML5キャンバスAPIのパスは、レンダリングする任意の形状を表します。

beginpath（）：描画を始めたグラフの種類に関係なく、最初に呼び出す必要があるのはbeginpathです。この単純な関数にはパラメーターが必要であり、新しいグラフの描画を開始しようとしていることをキャンバスに通知するために使用されます。

Moveto（x、y）：描画なし、現在の位置を新しいターゲット座標（x、y）に移動します。

Lineto（x、y）：現在の位置を新しいターゲット座標（x、y）に移動するだけでなく、2つの座標の間に直線を描画します。

Closepath（）：この関数はLinetoと非常によく似ています。唯一の違いは、ClosePathがターゲット座標としてパスの開始座標を自動的に使用することです。また、Canvasに、現在描かれた数字が閉じられているか、完全に囲まれた領域を形成したことを伝えています。

松の木の天蓋を描きます

関数CreateCanopypath（コンテキスト）{

//ツリーキャノピーを描きます

context.beginPath（）; context.moveto（-25、-50）;

Context.lineto（-10、-80）;

Context.lineto（-20、-80）;

Context.lineto（-5、-110）;

Context.lineto（-15、-110）; //ツリーの頂点

Context.lineto（0、-140）; context.lineto（15、-110）;

Context.lineto（5、-110）;

Context.lineto（20、-80）;

Context.lineto（10、-80）;

Context.lineto（25、-50）;

//開始点を接続し、パスを閉じます

Context.ClosePath（）;

} 関数drawtrails（）{

var canvas = document.getElementById（ 'Diagonal'）;

var context = canvas.getContext（ '2d'）; context.save（）;

Context.Translate（130、250）; //キャノピーを表現するパスを作成します

CreateCanopypath（コンテキスト）; //現在のパスを描きます

context.stroke（）;

context.restore（）;

} window.addeventlistener（ "load"、drawtrails、true）;

ストロークスタイル

ストロークモードにより、キャノピーがより現実的に見えるようになります。

//ラインの広い

Context.LineWidth = 4;

//滑らかなパスのジャンクションポイント

context.linejoin = 'round';

//色

Context.Strokestyle = '＃663300';

//現在のパスを描画します

context.stroke（）;

充填スタイル

context.fillstyle =＃339900; context.fill（）;長方形を描きます

木にトランクを追加します

context.fillstyle = '＃663300'; Context.FillRect（-5、-50、10、50）;描画曲線

context.save（）;

Context.Translate（-10、350）;

Context.beginPath（）; //最初の曲線は右上に曲がります

Context.Moveto（0、0）;

Context.QuadraticCurveto（170、-50、260、-190）; //右下に曲がります

Context.QuadraticCurveto（310、-250、410、-250）; //広い茶色のストロークでパスを描く

Context.Strokestyle = '＃663300';

Context.LineWidth = 20;

context.stroke（）; //以前のキャンバス状態を復元します

context.restore（）;

キャンバスに画像を挿入します

画像が操作できるようになるまで、画像が完全にロードされるまで待つ必要があります。ブラウザは通常、ページスクリプトが実行されたときに画像を非同期にロードします。画像を完全にロードする前にキャンバスにレンダリングしようとすると、キャンバスは画像を表示しません。したがって、レンダリングの前に画像がロードされていることを確認することに特に注意してください。

//画像をロードします

var bark = new Image（）;

bark.src = "bark.jpg"; //写真が読み込まれたら、図面関数を呼び出します

bark.onload = function（）{

DrawTrails（）;

}

写真を表示：

//背景パターンを背景コンテキストとして埋めます。Drawimage（Bark、-5、-50、10、50）;勾配

勾配を使用するには、3つのステップが必要です。

（1）グラデーションオブジェクトを作成します

（2）グラデーションオブジェクトの色を設定し、遷移方法を示します

（3）コンテキストで塗りつぶしスタイルまたはストロークスタイルのグラデーションを設定する

//トランクテクスチャとして使用される3次の水平勾配を作成します

var trunkgradient = context.createlineargradient（-5、-50、5、-50）; //トランクの左端は平均的な茶色です

trunkgradient.addcolorStop（0、 '＃663300'）; //木のトランクの左中央にある色があります

trunkgradient.addcolorstop（0.4、 '＃996600'）; //右端の色は暗くなければなりません

trunkgradient.addcolorstop（1、 '＃552200'）; //トランクを勾配で満たします

context.fillstyle = trunkgradient;

Context.FillRect（-5、-50、10、50）;

//垂直勾配を作成して、トランクにキャノピーを投影する

var canopyshadow = context.createLineargradient（0、-50、0、0）;

//投影勾配の開始点は黒で、透明度は50％です

canopyshadow.addcolorstop（0、 'rgba（0、0、0、0.5）'）;

//方向は垂直に下方にあり、勾配はすぐに徐々に変化し、この長さの外側に非常に短い距離内で完全に透明になります

//ツリーのトランクに投影はありません

canopyshadow.addcolorstop（0.2、 'rgba（0、0、0、0.0）'）; //トランクの投影勾配を入力します

context.fillstyle = canopyshadow;

Context.FillRect（-5、-50、10、50）;

背景画像

//画像をロードします

var gravel = new Image（）;

gravel.src = "gravel.jpg";

gravel.onload = function（）{

DrawTrails（）;

} //茶色の太い線を背景画像に置き換えます

context.strokestyle = context.createpattern（gravel、 'Repeat'）;

Context.LineWidth = 20;

context.stroke（）;

Context.CreatePatternの2番目のパラメーターは再現可能なマーカーであり、適切な値を表2-1で選択できます。

タイルメソッド	意義
繰り返す	（デフォルト）画像は2つの方向にタイル張りになります
リピートX	水平フラットタイル
繰り返し	垂直フラットタイル
繰り返し	写真は、タイル張りではなく、一度だけ表示されます

ズーム

スケーリング関数Context.scale（x、y）：x、yは、それぞれxとyの2つの次元の値を表します。各パラメーターが画像を表示すると、この方向の軸上で拡大する（または縮小）する画像の量を渡します。 x値が2の場合、描画された画像内のすべての要素が幅の2倍になることを意味します。 y値が0.5の場合、描画された画像は高さの半分になります。

// x = 130、y = 250で最初のツリーを描きます

context.save（）;

Context.Translate（130、250）;

DrawTree（コンテキスト）;

context.restore（）; // x = 260、y = 500で2番目のツリーを描画します

context.save（）;

Context.Translate（260、500）; // 2番目のツリーの高さと幅を元の2倍にズームします

Context.scale（2、2）;

DrawTree（コンテキスト）;

context.restore（）;

回転します

画像を回転させます

context.save（）;

//回転角パラメーターは、単位としてラジアンにあります

context.rotate（1.57）;

context.drawimage（myimage、0、0、100、100）; context.restore（）;

変換の使用方法

//現在のステータスを保存します

context.save（）; // y値が増加するとx値が増加します。引張変換の助けを借りて、

//影として使用される傾斜ツリーを作成できます

//変換が適用された後、すべての座標にマトリックスが掛けられます

context.transform（1、0、

-0.5、1、

、0）; // y軸方向に、影の高さを60％に変更します

Context.scale（1、0.6）; //トランクを20％の黒い透明性で満たす

context.fillstyle = 'rgba（0、0、0、0.2）';

Context.FillRect（-5、-50、10、50）; //既存の影効果でツリーを塗り直します

CreateCanopypath（コンテキスト）;

context.fill（）; //前のキャンバス状態を復元します

context.restore（）;

文章

context.filltext（Text、x、y、maxwidth）：テキストテキストコンテンツ、x、yテキスト位置を指定し、maxwidthはオプションのパラメーターであり、テキストの位置を制限します。

Context.StrokeText（Text、X、Y、MaxWidth）：テキストテキストコンテンツ、X、Yテキスト位置を指定し、MaxWidthはオプションのパラメーターであり、テキストの位置を制限します。

//キャンバスにテキストを描画します

context.save（）; //フォントサイズは60、フォントは衝撃です

Context.font = "60px Impact"; // fill color

context.fillstyle = '＃996600';

//中心

context.textalign = 'center'; //テキストを描画します

Context.fillText（ 'Happy Trails！'、200、60、400）;

context.restore（）;

影

影は、いくつかのグローバルコンテキストプロパティを通じて制御できます

財産	価値	述べる
シャドウコラー	任意のCSSの色値	透明性（アルファ）を使用できます
Shadowoffsetx	ピクセル値	値は正で、影を右に移動します。ネガティブで、影を左に移動します
ShadowOffsety	ピクセル値	値は正で、影を下に移動します。それは否定的で、影を上方に動かします
Shadowblur	ガウスファジー値	値が大きいほど、影の端がぼやけます

//黒色、20％の透明性

context.shadowcolor = 'rgba（0、0、0、0.2）'; // 15pxを右に、10pxを左に移動します

Context.ShadowOffSetx = 15;

Context.ShadowOffsety = -10; //わずかにぼやけた影

Context.ShadowBlur = 2;

ピクセルデータ

Context.getimagedata（SX、SY、SW、SH）：SX、XYは、ポイント、SW：幅、SH：高さを決定します。

この関数は3つのプロパティを返します：幅列あたりのピクセル数列あたりのピクセル数ピクセル数

データキャンバスから取得した各ピクセルのRGBA値（値の赤、緑、青、透明度）を含むアレイの束。

Context.putimagedata（Imagedata、dx、dy）：開発者が一連の画像データを渡すことを可能にします。 DX、DYはオフセットを指定するために使用されます。使用すると、関数は指定されたキャンバス位置にジャンプして更新されます

着信ピクセルデータを表示します。

Canvas.Todataurl：Canvasで現在提示されているデータは、プログラムで取得できます。取得したデータはテキスト形式で保存され、ブラウザはそれを画像に解析できます。