HTML5 Canvas API のプログラミング _html5 チュートリアルのスキル

コードをコピー

コードは次のとおりです:

キャンバスに参加

コードをコピー

コードは次のとおりです:

//Canvas 要素を取得しますとその描画コンテキスト var Canvas = document.getElementById("diagonal");
var context = Canvas.getContext("2d");
//絶対座標を使用してパスを作成します
context.beginPath( );
context.moveTo(70, 140);
context.lineTo(140, 70);
//この線を Canvas に描画します
context.ストローク(); >

変身

変形(ズーム、平行移動、回転)等により上記と同様の効果を得ることができます。

変形を使用して斜めの線を描画します

コードをコピーコードは次のとおりです:

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

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.ストローク();

context.restore();

パス

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

beginPath(): どのような種類のグラフィックスの描画を開始する場合でも、最初に呼び出す必要があるのは beginPath です。この単純な関数はパラメーターをとらず、新しいグラフィックの描画を開始することをキャンバスに通知するために使用されます。

moveTo(x,y): 描画せずに現在位置を新しいターゲット座標 (x,y) に移動します。

lineTo(x,y): 現在位置を新しいターゲット座標 (x,y) に移動するだけでなく、2 つの座標間に直線を描きます。

closePath(): この関数は lineTo と非常によく似た動作をします。唯一の違いは、closePath がパスの開始座標をターゲット座標として自動的に使用することです。また、現在描画されている形状が閉じているか、完全に囲まれた領域を形成していることをキャンバスに通知します。これは、将来の塗りつぶしやストロークに非常に役立ちます。

松の樹冠を描く

コードをコピーしますコードは次のとおりです。

function createCanopyPath(context) {

// 樹冠を描画します
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();
}

functiondrawTrails() {
var Canvas = document.getElementById('diagonal');
var context = Canvas.getContext('2d');

context.save();
context.translate(130, 250);

//キャノピーを表すパスを作成します
createCanopyPath(context);

// 現在のパスを描画します
context.ストローク();
context.restore();
}

window.addEventListener("load",drawTrails, true);

ストロークスタイル

ストローク モードを使用して、樹冠をよりリアルに見せます。

コードをコピーしますコードは次のとおりです:

//行を広げます

context .lineWidth = 4;
//スムーズパスのジョイントポイント
context.lineJoin = 'round';
//Color
context.ストロークStyle = '#663300';
//現在のパスを描画
context.ストローク();

塗りつぶしスタイル

context.fillStyle = "#339900";

長方形を描画します

ツリーに幹を追加します

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.drawingStyle = '#663300';
context.lineWidth = 20;
context.ストローク();

// 前のキャンバスの状態を復元します
context.restore();

キャンバスに写真を挿入

イメージを操作するには、イメージが完全にロードされるまで待つ必要があります。通常、ブラウザはページ スクリプトの実行時に画像を非同期で読み込みます。画像が完全に読み込まれる前にキャンバスにレンダリングしようとすると、キャンバスには画像が表示されなくなります。そのため、画像が確実に読み込まれるように特別な注意を払う必要があります。 。

コードをコピー

コードは次のとおりです:

// 画像をロード
var bark = new Image();
bark.src = "bark.jpg";

// 画像がロードされた後、描画関数を呼び出します
bark.onload = function () {
drawTrails();
}

画像を表示:

//木の幹の背景として背景パターンで塗りつぶします context.drawImage(bark, -5, -50, 10, 50);

グラデーション

グラデーションを使用するには、次の 3 つの手順が必要です:

(1) グラデーションオブジェクトの作成

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

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

コードをコピーします

コードは次のとおりです:

// 3 つのコードを作成します-次元の木の幹のテクスチャ 水平方向のグラデーションの順序
var trainGradient = 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)');
// 方向は垂直下向きで、短い距離ですぐに完全に透明になります。
// この長さを超えています。Projection
canopyShadow.addColorStop(0.2, 'rgba(0, 0, 0, 0.0)');

// 木の幹を投影グラデーションで塗りつぶします
context.fillStyle = canopyShadow;
context.fillRect(-5, -50, 10, 50);

背景画像

コードをコピー

コードは次のとおりです:

// 画像をロード

vargravel = new Image();

gravel.src = "gravel.jpg";
gravel.onload = function () {
drawTrails();
}

//茶色の太い線を背景画像に置き換えます
context.drawingStyle = context.createPattern(gravel, 'repeat');
context.lineWidth = 20;
context.steroid() ;



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

ズーム

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

コードをコピー

コードは次のとおりです:

// X=130 、Y= 250 で最初のツリーを描画します
context.save();
context.translate(130, 250);
drawTree(context);
context.restore(); p>

// 2 番目のツリーを X=260、Y=500 に描画します
context.save();
context.translate(260, 500);

//2 番目のツリーの高さと幅を元の値の 2 倍に拡大します
context.scale(2, 2);
drawTree(context);
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);
context.fill();

//前のキャンバスの状態を復元します
context.restore();

テキスト

context.fillText(text,x,y,maxwidth): テキスト テキストの内容、x、y はテキストの位置を指定します。maxwidth はオプションのパラメーターで、テキストの位置を制限します。
context.drawingText(text,x,y,maxwidth): テキスト テキストの内容、x、y はテキストの位置を指定します。maxwidth はオプションのパラメーターで、テキストの位置を制限します。

コードをコピー

コードは次のとおりです:

// キャンバスにテキストを描画します
context.save();

//フォント サイズは 60 で、フォントは Impact です
context.font = "60px Impact";

//塗りつぶしの色
context.fillStyle = '#996600';
//中央
context.textAlign = 'center';

//テキストを描画します
context.fillText('Happy Trails!', 200, 60, 400);
context.restore();

シャドウ

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

属性	值	备注
shadowColor	任何CSS中的颜色值	可以使用透明度（alpha）
shadowOffsetX	像素值	值为正数，向右移动阴影;为负数，向左移动阴影
shadowOffsetY	像素值	值为正数，向下移动阴影;为负数，向上移动阴影
shadowBlur	高斯模糊值	值越大，阴影边缘越模糊

コードをコピーします

コードは次のとおりです:

// カラー 黒、20 % 透明度
context.shadowColor = 'rgba(0, 0, 0, 0.2)';

// 右に 15 ピクセル、左に 10 ピクセル移動
context.shadowOffsetX = 15;
context.shadowOffsetY = -10;

// わずかにぼやけた影
context.shadowBlur = 2;

ピクセルデータ

context.getImageData(sx, sy, sw, sh): sx, xy は点を決定します、sw: 幅、sh: 高さ。

この関数は 3 つの属性を返します: 幅 各行のピクセル数 高さ 各列のピクセル数

Canvas から取得した各ピクセルの RGBA 値 (値の赤、緑、青、透明度) のデータのグループ。

context.putImageData(imagedata,dx,dy): 開発者が画像データのセットを渡すことができます。dx と dy を使用すると、関数は指定されたキャンバスの位置にジャンプします。 🎜>

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

canvas.toDataUrl: キャンバス上に現在表示されているデータはプログラムで取得でき、取得されたデータはテキスト形式で保存され、ブラウザーで画像に解析できます。