JS Canvas インターフェースとアニメーション効果

概要

<canvas> 要素は画像を生成するために使用されます。それ自体はキャンバスのようなもので、JavaScript は API を操作することでその上に画像を生成します。その基礎となる構造はピクセルであり、<canvas> は基本的に JavaScript で操作できるビットマップです。

SVG 画像との違いは、<canvas> はさまざまなメソッドを呼び出して画像を生成するスクリプトであるのに対し、SVG はさまざまなサブ要素を通じて画像を生成する XML ファイルである点です。

Canvas API を使用する前に、Web ページに新しい <canvas> 要素を作成する必要があります。

<キャンバスid="myCanvas" 幅="400" 高さ="250">
  お使いのブラウザはキャンバスをサポートしていません。
</キャンバス>

ブラウザがこの API をサポートしていない場合、<canvas> タグの中央に「お使いのブラウザは Canvas をサポートしていません」というテキストが表示されます。

各 <canvas> 要素には、対応する CanvasRenderingContext2D オブジェクト (コンテキストオブジェクト) があります。 Canvas API はこのオブジェクトで定義されます。

var キャンバス = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");

上記のコードでは、<canvas> 要素ノードオブジェクトの getContext() メソッドが CanvasRenderingContext2D オブジェクトを返します。

Canvas API では、getContext メソッドでパラメータ 2d を指定する必要があることに注意してください。これは、<canvas> ノードが 2D フラットイメージを生成することを意味します。パラメータが webgl の場合、WebGL API に属する 3D ステレオパターンの生成に使用されることを意味します。

Canvas API は、使用方法に応じて、グラフィックスの描画と画像処理の 2 つの部分に分かれています。

Canvas API: グラフィックスの描画

Canvas キャンバスは描画用の平面空間を提供し、この空間内の各ポイントには独自の座標があります。原点 (0, 0) は画像の左上隅にあり、x 軸の正の方向は原点の右側にあり、y 軸の正の方向は原点の下部にあります。

パス

パスを描画するには、次のメソッドとプロパティを使用します。

CanvasRenderingContext2D.beginPath(): パスの描画を開始します。
CanvasRenderingContext2D.closePath(): パスを終了し、現在のパスの開始点に戻ります。現在の点から開始点まで直線が描画されます。図形がすでに閉じられている場合、または 1 つの点しかない場合、このメソッドは効果がありません。
CanvasRenderingContext2D.moveTo(): パスの開始点を設定します。つまり、新しいパスの開始点を (x, y) 座標に移動します。
CanvasRenderingContext2D.lineTo(): 現在の点を (x, y) 座標に直線で接続します。
CanvasRenderingContext2D.fill(): パスの内側を色で塗りつぶします (デフォルトは黒)。
CanvasRenderingContext2D.stroke(): パスラインの色 (デフォルトは黒)。
CanvasRenderingContext2D.fillStyle: パスの塗りつぶしの色とスタイルを指定します (デフォルトは黒)。
CanvasRenderingContext2D.strokeStyle: パスラインの色とスタイルを指定します (デフォルトは黒)。

var キャンバス = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");

ctx.beginPath();
ctx.moveTo(100, 100);
ctx.lineTo(200, 200);
ctx.lineTo(100, 200);

上記のコードはパスの形状を決定するだけであり、色がないためキャンバス上では表示されません。だから着色が必要なのです。

ctx.fill();
// または ctx.stroke();

上記のコードでは、どちらの方法でもパスを表示できます。 fill() はパスの内側を色で塗りつぶしてソリッドシェイプにします。stroke() はパスの線のみに色を付けます。

どちらの方法でもデフォルトで黒が使用され、fillStyle プロパティとstrokeStyle プロパティを使用して他の色を指定できます。

ctx.fillStyle = "赤";
ctx.fill();
// または ctx.strokeStyle = "red";
ctx.stroke();

上記のコードでは、塗りつぶしと線の色を赤に指定しています。

線種

次のメソッドとプロパティは、線の視覚的な特性を制御します。

CanvasRenderingContext2D.lineWidth: 線の幅を指定します。デフォルトは 1.0 です。
CanvasRenderingContext2D.lineCap: 線の端のスタイルを指定します。指定できる値は、butt (デフォルト値、端は長方形)、round (端は円)、square (端は同じ幅で高さが線幅の半分の突出した長方形) の 3 つです。
CanvasRenderingContext2D.lineJoin: 線分の交差のスタイルを指定します。指定できる値は、round (交差は扇形)、bevel (交差は三角形の底辺)、miter (デフォルト値、交差はダイヤモンド形) の 3 つです。
CanvasRenderingContext2D.miterLimit: 交差ダイヤモンドの長さを指定します。デフォルトは 10 です。この属性は、lineJoin 属性の値が miter に等しい場合にのみ有効です。
CanvasRenderingContext2D.getLineDash(): 破線内の線分の長さと間隔を表す配列を返します。
CanvasRenderingContext2D.setLineDash(): 破線内の線分の長さと間隔を指定するために使用される配列。

var キャンバス = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");

ctx.beginPath();
ctx.moveTo(100, 100);
ctx.lineTo(200, 200);
ctx.lineTo(100, 200);

ctx.lineWidth = 3;
ctx.lineCap = "丸い";
ctx.lineJoin = "丸め";
ctx.setLineDash([15, 5]);
ctx.stroke();

上記のコードでは、線の幅は 3 で、線の端と交差点は丸められ、破線に設定されています。

矩形

長方形を描画するには、次の方法を使用します。

CanvasRenderingContext2D.rect(): 長方形のパスを描画します。
CanvasRenderingContext2D.fillRect(): 四角形を塗りつぶします。
CanvasRenderingContext2D.strokeRect(): 長方形の境界線を描画します。
CanvasRenderingContext2D.clearRect(): 指定された長方形領域内のすべてのピクセルが透明になります。

上記の 4 つのメソッドの形式は同じです。いずれも、四角形の左上隅の水平座標と垂直座標、四角形の幅と高さという 4 つのパラメータを受け入れます。

CanvasRenderingContext2D.rect() メソッドは、長方形のパスを描画するために使用されます。

var キャンバス = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");

ctx.rect(10, 10, 100, 100);
ctx.fill();

上記のコードは、左上隅が (10, 10) で幅と高さが 100 の正方形を描画します。

CanvasRenderingContext2D.fillRect() は、長方形の領域を色で塗りつぶすために使用されます。

var キャンバス = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");

ctx.fillStyle = "緑";
ctx.fillRect(10, 10, 100, 100);

上記のコードは、左上隅の座標が (10, 10)、幅と高さが 100 の緑色の正方形を描画します。

CanvasRenderingContext2D.strokeRect() は、長方形領域の境界を描画するために使用されます。

var キャンバス = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");

ctx.strokeStyle = "緑";
ctx.strokeRect(10, 10, 100, 100);

上記のコードは、左上隅の座標が (10, 10)、幅と高さが 100 の緑色の白抜きの四角形を描画します。

CanvasRenderingContext2D.clearRect() は、指定された長方形領域のピクセル色を消去するために使用されます。これは、以前の描画効果をすべて削除することと同じです。

var キャンバス = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");

ctx.fillRect(10, 10, 100, 100);
ctx.clearRect(15, 15, 90, 90);

上記のコードは、最初に 100 x 100 の正方形を描画し、次にその内部の 90 x 90 の領域を消去します。これは、5 ピクセル幅の境界線を形成するのと同じです。

アーク

円弧を描くには、次の方法を使用します。

CanvasRenderingContext2D.arc(): 中心と半径を指定して円弧を描きます。
CanvasRenderingContext2D.arcTo(): 2 つの接線と半径を指定して円弧を描きます。

CanvasRenderingContext2D.arc() は主に円や扇形を描画するために使用されます。

// フォーマット ctx.arc(x, y, radius, startAngle, endAngle, anticlockwise);

// 例 ctx.arc(5, 5, 5, 0, 2 * Math.PI, true);

arc() メソッドの x および y パラメータは円の中心の座標、radius は半径、startAngle および endAngle はセクターの開始角度と終了角度 (ラジアンで表されます)、anticlockwise は描画を反時計回り (true) にするか時計回り (false) にするかを示します。このパラメータは、セクターの方向 (たとえば、上半円または下半円) を制御するために使用されます。

以下は塗りつぶされた円を描く例です。

var キャンバス = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");

ctx.beginPath();
ctx.arc(60, 60, 50, 0, Math.PI * 2, true);
ctx.fill();

上記のコードは、半径 50、開始角度 0、終了角度 2 * PI の完全な円を描画します。

中空の半円を描く例。

var キャンバス = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");

ctx.beginPath();
ctx.moveTo(50, 20);
ctx.arc(100, 20, 50, 0, Math.PI, false);
ctx.stroke();

CanvasRenderingContext2D.arcTo() メソッドは主に円弧を描くために使用されます。2 つの点の座標が必要です。現在の点と最初の点は直線を形成し、最初の点と 2 番目の点は別の直線を形成し、2 つの直線に接する円弧を描きます。

var キャンバス = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");

ctx.beginPath();
ctx.moveTo(0, 0);
ctx.arcTo(50, 50, 100, 0, 25);
ctx.lineTo(100, 0);
ctx.stroke();

上記のコードでは、arcTo() には 5 つのパラメータがあります。最初の 2 つのパラメータは最初の点の座標、3 番目と 4 番目のパラメータは 2 番目の点の座標、5 番目のパラメータは半径です。次に、(0, 0) と (50, 50) が直線を形成し、次に (50, 50) と (100, 0) が 2 番目の直線を形成します。円弧は、これら 2 つの線に接する部分です。

文章

テキストを描画するには、次のメソッドとプロパティを使用します。

CanvasRenderingContext2D.fillText(): 指定された場所に実線文字を描画します。
CanvasRenderingContext2D.strokeText(): 指定された場所に白抜き文字を描画します。
CanvasRenderingContext2D.measureText(): TextMetrics オブジェクトを返します。
CanvasRenderingContext2D.font: フォントサイズとフォントを指定します。デフォルト値は 10px sans-serif です。 CanvasRenderingContext2D.textAlign: テキストの配置。デフォルト値は start です。
CanvasRenderingContext2D.direction: テキストの方向。デフォルト値は inherit です。
CanvasRenderingContext2D.textBaseline: テキストの垂直位置。デフォルト値はアルファベットです。

fillText() メソッドは、指定された位置に実線文字を描画するために使用されます。

CanvasRenderingContext2D.fillText(テキスト、x、y [、最大幅])

このメソッドは 4 つのパラメータを受け入れます。

text: 入力する文字列。
x: テキストの開始点の水平座標（ピクセル単位）。
y: テキストの開始点の垂直座標（ピクセル単位）。
maxWidth: テキストの最大ピクセル幅。このパラメータはオプションです。省略すると、幅の制限がないことを意味します。テキストの実際の長さがこのパラメータで指定された値を超える場合、ブラウザはより小さいフォントでテキストを埋めようとします。

var キャンバス = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");

ctx.fillText("こんにちは世界", 50, 50);

上記のコードは、位置 (50, 50) に文字列 Hello world を書き込みます。

fillText() メソッドは改行をサポートしていないことに注意してください。すべてのテキストは 1 行に表示する必要があります。複数行のテキストを生成する場合は、fillText() メソッドを複数回呼び出します。

中空文字を追加するには、strokeText() メソッドを使用します。そのパラメータは fillText() と同じです。

var キャンバス = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");

ctx.strokeText("こんにちは世界", 50, 50);

上記の 2 つの方法で描画されるテキストは、デフォルトでサイズが 10 px で、サンセリフフォントになります。フォント属性でフォント設定を変更できます。この属性の値は文字列であり、CSS フォント属性を使用して設定できます。

var キャンバス = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");

ctx.font = "太字 20px Arial";
ctx.fillText("こんにちは世界", 50, 50);

textAlign 属性は、テキストの配置を指定するために使用されます。以下の値を取ることができます。

左: 左揃え
右: 右揃え
中央: 中央
start: デフォルト値。開始点は揃えられます (左から右へのテキストは左揃え、右から左へのテキストは右揃えになります)。
end: 配置の終了 (左から右のテキストの場合は右配置、右から左のテキストの場合は左配置)。

var キャンバス = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");

ctx.font = "太字 20px Arial";
ctx.textAlign = "中央";
ctx.fillText("こんにちは世界", 50, 50);

direction 属性はテキストの方向を指定します。デフォルト値は inherit で、<canvas> または document の設定を継承することを意味します。その他の値には、ltr (左から右) と rtl (右から左) があります。

textBaseline プロパティはテキストの垂直位置を指定し、次の値を取ることができます。

top: 上揃え（文字のベースラインが全体的に上に移動します）。
吊り下げ: 吊り下げ配置 (文字の上端が一直線上にある)。ヒンディー語とチベット語に適しています。
middle: 中央揃え（文字の中央の線が一直線になります）。
alphabetic: デフォルト値。文字がアルファベットの通常の位置 (4 行グリッドの 3 行目) に配置されることを意味します。
表意文字: 東アジアの文字で使用される、降順配置 (文字の下端が一直線上にある)。
bottom: 下揃え (文字のベースラインが下に移動します)。英語の文字の場合、この設定は表意文字と変わりません。

measureText() メソッドは文字列をパラメータとして受け入れ、TextMetrics オブジェクトを返します。このオブジェクトから、パラメータ文字列に関する情報 (現在は主にレンダリング後のテキストの幅) を取得できます。

var キャンバス = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");

var text1 = ctx.measureText("こんにちは世界");
テキストの幅; // 49.46

ctx.font = "太字 20px Arial";
テキスト2の幅; // 107.78

上記のコードでは、10 ピクセルの文字列「Hello world」はレンダリング後に幅が 49.46 になります。 20pxに拡大すると幅は107.78になります。

グラデーションと画像の塗りつぶし

グラデーション効果と画像塗りつぶし効果を設定するには、次の方法を使用します。

CanvasRenderingContext2D.createLinearGradient(): 線形グラデーションスタイルを定義します。
CanvasRenderingContext2D.createRadialGradient(): 放射状グラデーションスタイルを定義します。
CanvasRenderingContext2D.createPattern(): 画像の塗りつぶしスタイルを定義します。

createLinearGradient() メソッドは、指定された直線に従って線形グラデーションスタイルを生成します。

ctx.createLinearGradient(x0, y0, x1, y1);

ctx.createLinearGradient(x0, y0, x1, y1) メソッドは 4 つのパラメータを受け入れます。x0 と y0 は開始点の水平座標と垂直座標であり、x1 と y1 は終了点の水平座標と垂直座標です。異なる座標値を使用することで、上から下、左から右などへのグラデーションを生成できます。

このメソッドの戻り値は CanvasGradient オブジェクトです。このオブジェクトには、グラデーションポイントの色を指定するために使用される addColorStop() 方向が 1 つだけあります。 addColorStop() メソッドは 2 つのパラメータを受け入れます。最初のパラメータは 0 から 1 までの位置で、0 は開始点、1 は終了点を表します。2 番目のパラメータは CSS カラーを表す文字列です。

var キャンバス = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");

var グラデーション = ctx.createLinearGradient(0, 0, 200, 0);
グラデーションにColorStopを追加します(0, "緑");
グラデーション.addColorStop(1, "白");
ctx.fillStyle = グラデーション;
ctx.fillRect(10, 10, 200, 100);

上記のコードでは、グラデーションスタイル gradient を定義した後、このスタイルが fillStyle 属性に割り当てられ、fillRect() によってこのスタイルで塗りつぶされた長方形領域が生成されます。

createRadialGradient() メソッドは放射状グラデーションを定義し、2 つの円を指定する必要があります。

ctx.createRadialGradient(x0, y0, r0, x1, y1, r1);

createRadialGradient() メソッドは 6 つのパラメータを受け入れます。x0 と y0 は放射が始まる円の中心座標、r0 は開始円の半径、x1 と y1 は放射が終了する円の中心座標、r1 は終了円の半径です。

このメソッドの戻り値も CanvasGradient オブジェクトです。

var キャンバス = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");

var グラデーション = ctx.createRadialGradient(100, 100, 50, 100, 100, 100);
グラデーション.addColorStop(0, "白");
グラデーション.addColorStop(1, "緑");
ctx.fillStyle = グラデーション;
ctx.fillRect(0, 0, 200, 200);

上記のコードでは、放射状パターンを生成した後、このパターンで四角形を塗りつぶします。

createPattern() メソッドは、指定された方向に画像を繰り返して指定された領域を塗りつぶす画像塗りつぶしパターンを定義します。

ctx.createPattern(画像、繰り返し);

このメソッドは 2 つのパラメータを受け入れます。最初のパラメータは画像データで、<img> 要素、別の <canvas> 要素、または画像を表す Blob オブジェクトのいずれかになります。 2 番目のパラメータは、repeat (双方向繰り返し)、repeat-x (水平繰り返し)、repeat-y (垂直繰り返し)、no-repeat (繰り返しなし) の 4 つの値を持つ文字列です。 2 番目の引数が空の文字列または null の場合、null と同等になります。

このメソッドの戻り値は CanvasPattern オブジェクトです。

var キャンバス = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");

var img = 新しい画像();
アップロードした画像は次のようになります。
img.onload = 関数() {
  var パターン = ctx.createPattern(img, "repeat");
  ctx.fillStyle = パターン;
  ctx.fillRect(0, 0, 400, 400);
};

上記のコードでは、画像が正常に読み込まれた後、createPattern() を使用して画像スタイルを生成し、このスタイルを使用して指定された領域を塗りつぶします。

影

影を設定するには、次のプロパティを使用します。

CanvasRenderingContext2D.shadowBlur: 影のぼかし具合。デフォルト値は 0 です。
CanvasRenderingContext2D.shadowColor: 影の色。デフォルトは黒です。
CanvasRenderingContext2D.shadowOffsetX: 影の水平方向の変位。デフォルトは 0 です。
CanvasRenderingContext2D.shadowOffsetY: 影の垂直方向の変位。デフォルトは 0 です。

ここに例があります。

var キャンバス = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");

ctx.shadowOffsetX = 10;
ctx.shadowOffsetY = 10;
ctx.shadowBlur = 5;
ctx.shadowColor = "rgba(0,0,0,0.5)";

ctx.fillStyle = "緑";
ctx.fillRect(10, 10, 100, 100);

Canvas API: 画像処理

CanvasRenderingContext2D.drawImage()

Canvas API を使用すると、画像を読み取り、drawImage() メソッドを使用して画像をキャンバスに配置することで、画像ファイルをキャンバスに書き込むことができます。

CanvasRenderingContext2D.drawImage() には 3 つの使用形式があります。

ctx.drawImage(画像、dx、dy);
ctx.drawImage(画像、dx、dy、dWidth、dHeight);
ctx.drawImage(イメージ、sx、sy、sWidth、sHeight、dx、dy、dWidth、dHeight);

各パラメータの意味は次のとおりです。

画像: 画像要素
sx: 画像内の水平座標。キャンバス上の配置ポイントにマッピングするために使用されます。
sy: キャンバス上の配置ポイントにマッピングするために使用される、画像内の垂直座標。
sWidth: キャンバス上の画像の幅。これによりスケーリング効果が生成されます。指定しない場合、画像は拡大縮小されず、キャンバスの幅全体を占めます。
sHeight: キャンバス上の画像の高さ。これによりスケーリング効果が生成されます。指定しない場合、画像は拡大縮小されず、キャンバスの実際の高さを占めます。
dx: キャンバス内の水平座標。画像の左上隅を配置するために使用されます。
dy: キャンバス内の垂直座標。画像の右上隅を配置するために使用されます。
dWidth: キャンバス内の画像の幅。これによりスケーリング効果が生成されます。
dHeight: キャンバス内の画像の高さ。これによりスケーリング効果が生成されます。

以下は最も単純な使用シナリオで、画像をキャンバスに配置し、2 つの画像の左上隅を揃えます。

var キャンバス = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");

var img = 新しい画像();
画像を保存する
img.onload = 関数() {
  ctx.drawImage(画像, 0, 0);
};

上記のコードは、PNG 画像をキャンバスに配置します。このとき、画像は元のサイズのまま表示されます。キャンバスが画像より小さい場合は、キャンバスと同じ大きさの画像の左上部分のみが表示されます。

画像全体を表示する場合は、画像の幅と高さを使用してキャンバスの幅と高さを設定できます。

var キャンバス = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");

var image = new Image(60, 45);
image.onload = 実際のサイズを描画します。
アップロードしたファイルは、次の場所に保存されます。

関数drawImageActualSize() {
  キャンバスの幅 = this.naturalWidth;
  キャンバスの高さ = this.naturalHeight;
  ctx.drawImage(this, 0, 0, this.naturalWidth, this.naturalHeight);
}

上記のコードでは、<canvas> 要素のサイズが画像の元のサイズに設定されており、画像が完全に表示されるようになっています。画像の元のサイズは画像が正常に読み込まれた後にのみ取得できるため、キャンバスサイズの調整は image.onload リスニング関数に配置する必要があります。

ピクセルの読み取りと書き込み

ピクセルの読み取りと書き込みに関連するメソッドは次の 3 つです。

CanvasRenderingContext2D.getImageData(): キャンバスをImageDataオブジェクトとして読み取ります
CanvasRenderingContext2D.putImageData(): ImageDataオブジェクトをキャンバスに書き込みます
CanvasRenderingContext2D.createImageData(): ImageDataオブジェクトを生成します

(1) イメージデータを取得する()

CanvasRenderingContext2D.getImageData() メソッドは、<canvas> の内容を読み取り、各ピクセルに関する情報を含む ImageData オブジェクトを返すために使用されます。

ctx.getImageData(sx, sy, sw, sh);

getImageData() メソッドは 4 つのパラメータを受け入れます。 sx と sy は読み取り領域の左上隅の座標であり、sw と sh は読み取り領域の幅と高さです。 <canvas> 領域全体を読み取りたい場合は、次のように記述します。

var キャンバス = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");

var imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);

getImageData() メソッドは ImageData オブジェクトを返します。このオブジェクトには 3 つのプロパティがあります。

ImageData.data: 1 次元配列。この配列の値は、各ピクセルの赤、緑、青、アルファチャネルの値 (各値の範囲は 0 ～ 255) なので、この配列の長さは、画像のピクセル幅 x 画像のピクセル高さ x 4 に等しくなります。この配列は読み取りだけでなく書き込みも可能なので、この配列を操作することで、画像を操作するという目的を達成できます。
ImageData.width: ImageData のピクセル幅を表す浮動小数点数。
ImageData.height: ImageData のピクセル高さを表す浮動小数点数。

(2) 画像データを置く()

CanvasRenderingContext2D.putImageData() メソッドは、ImageData オブジェクトのピクセルを <canvas> キャンバスに描画します。この方法は 2 つの形式で使用できます。

ctx.putImageData(画像データ、dx、dy);
ctx.putImageData(imagedata, dx, dy, dirtyX, dirtyY, dirtyWidth, dirtyHeight);

このメソッドには次のパラメータがあります。

imagedata: ピクセル情報を含む ImageData オブジェクト。
dx: <canvas> 要素内の水平座標。ImageData イメージの左上隅を配置するために使用されます。
dy: <canvas> 要素内の垂直座標。ImageData イメージの左上隅を配置するために使用されます。
dirtyX: ImageData 画像内の水平座標。<canvas> 上に配置された長方形領域の左上隅の水平座標として使用されます。デフォルト値は 0 です。
dirtyY: ImageData 画像内の垂直座標。<canvas> 上に配置された長方形領域の左上隅の垂直座標として使用されます。デフォルト値は 0 です。
dirtyWidth: <canvas> に配置される長方形領域の幅。デフォルトは ImageData 画像の幅です。
dirtyHeight: <canvas> に配置される長方形領域の高さ。デフォルトは ImageData 画像の高さです。

以下は、ImageData オブジェクトを <canvas> に描画する例です。

ctx.putImageData(imageData, 0, 0);

(3) イメージデータを作成する()

CanvasRenderingContext2D.createImageData() メソッドは、すべてのピクセルが透明な黒 (つまり、各値が 0) である空の ImageData オブジェクトを生成するために使用されます。この方法は 2 つの形式で使用できます。

ctx.createImageData(幅、高さ);
ctx.createImageData(イメージデータ);

createImageData() メソッドのパラメータは次のとおりです。

width: ImageData オブジェクトの幅（ピクセル単位）。
height: ImageData オブジェクトの高さ（ピクセル単位）。
imagedata: 既存の ImageData オブジェクト。戻り値はこのオブジェクトのコピーになります。

var キャンバス = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");

var imageData = ctx.createImageData(100, 100);

上記のコードでは、imageData は 100 x 100 ピクセルの領域であり、各ピクセルは透明な黒です。

CanvasRenderingContext2D.save()、CanvasRenderingContext2D.restore()

CanvasRenderingContext2D.save() メソッドは、キャンバスの現在のスタイルをスタックに保存するために使用されます。これは、メモリ内にスタイルスナップショットを生成することと同じです。

var キャンバス = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");

ctx.save();

上記のコードでは、 save() によってキャンバスのデフォルトスタイルのスナップショットが作成されます。

CanvasRenderingContext2D.restore() メソッドは、キャンバスのスタイルを最後に保存されたスナップショットに復元します。保存されたスナップショットがない場合は効果がありません。

コンテキスト環境では、復元メソッドを使用して最後に保存されたコンテキスト環境に復元します。

var キャンバス = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");

ctx.save();

ctx.fillStyle = "緑";
ctx.restore();

ctx.fillRect(10, 10, 100, 100);

上記のコードは長方形を描画します。四角形の塗りつぶし色は元々緑に設定されていましたが、restore() メソッドはこの設定を元に戻し、スタイルを最後に保存した状態 (つまり、デフォルトのスタイル) に復元するため、実際の塗りつぶし色は黒 (デフォルトの色) になります。

キャンバスレンダリングコンテキスト2D.canvas

CanvasRenderingContext2D.canvas プロパティは、現在の CanvasRenderingContext2D オブジェクトが配置されている <canvas> 要素を指します。このプロパティは読み取り専用です。

var キャンバス = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");

ctx.canvas === キャンバス; // true

画像変換

画像変換には以下の方法が使用されます。

CanvasRenderingContext2D.rotate(): 画像の回転
CanvasRenderingContext2D.scale(): 画像のスケーリング
CanvasRenderingContext2D.translate(): 画像の変換
CanvasRenderingContext2D.transform(): 変換行列による画像変換を完了する
CanvasRenderingContext2D.setTransform(): 前回の画像変換をキャンセルします

(1) 回転()

CanvasRenderingContext2D.rotate() メソッドは、画像を回転するために使用されます。時計回りに回転する度数を表すラジアン値をパラメータとして受け入れます。

var キャンバス = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");

ctx.rotate((45 * Math.PI) / 180);
ctx.fillRect(70, 0, 100, 30);

上記のコードは、時計回りに 45 度傾いた四角形を表示します。 rotate() メソッドは fillRect() メソッドの前に呼び出す必要があることに注意してください。そうしないと機能しません。

回転の中心点は常にキャンバスの左上隅の原点になります。中心点を変更する場合は、translate() メソッドを使用してキャンバスを移動する必要があります。

(2) スケール()

CanvasRenderingContext2D.scale() メソッドは、画像の拡大縮小に使用されます。 x 軸方向のスケーリング係数と y 軸方向のスケーリング係数の 2 つのパラメータを受け入れます。デフォルトでは、1 単位は 1 ピクセルで、スケーリング係数で単位を拡大縮小できます。たとえば、スケーリング係数が 0.5 の場合、サイズは元のサイズの 50% に縮小され、スケーリング係数が 10 の場合、サイズは 10 倍に拡大されます。

var キャンバス = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");

ctx.scale(10, 3);
ctx.fillRect(10, 10, 10, 10);

上記のコードでは、元の長方形は 10 x 10 ですが、拡大縮小後は 100 x 30 として表示されます。

スケーリング係数が 1 の場合、画像はまったく拡大縮小されないことを意味します。 -1 の場合、方向が反転します。 ctx.scale(-1, 1) は水平反転を意味し、ctx.scale(1, -1) は垂直反転を意味します。

var キャンバス = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");

ctx.scale(1, -2);
ctx.font = "16px セリフ";
ctx.fillText("こんにちは世界!", 20, -20);

上記のコードは、高さが 2 倍に拡大された水平反転された Hello World! を表示します。

負のスケーリングは本質的に座標の反転であり、対象となる座標軸はキャンバスの左上隅にある原点の座標軸であることに注意してください。

（３）翻訳する（）

CanvasRenderingContext2D.translate() メソッドは、画像を変換するために使用されます。これは、x 軸に沿って移動する距離と、y 軸に沿って移動する距離 (ピクセル単位) の 2 つのパラメータを受け入れます。

var キャンバス = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");

ctx.translate(50, 50);
ctx.fillRect(0, 0, 100, 100);

(4) 変換()

CanvasRenderingContext2D.transform() メソッドは、変換行列の 6 つの要素をパラメーターとして受け入れ、スケーリング、回転、移動、傾斜などの変形を実行します。

使用形式は以下のとおりです。

ctx.transform(a, b, c, d, e, f);
/*
a: 水平スケーリング（デフォルト値 1、単位倍数）
b: 水平傾斜（デフォルト値 0、単位 ラジアン）
c: 垂直傾斜（デフォルト値 0、単位 ラジアン）
d: 垂直スケーリング（デフォルト値 1、単位倍数）
e: 水平方向の変位（デフォルト値 0、単位ピクセル）
f: 垂直方向の変位（デフォルト値 0、単位ピクセル）
*/

ここに例があります。

var キャンバス = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");

ctx.transform(2, 0, 0, 1, 50, 50);
ctx.fillRect(0, 0, 100, 100);

上記のコードでは、元の形状は 100 x 100 の長方形で、200 x 100 の長方形に拡大され、左上隅が (0, 0) から (50, 50) に移動します。

複数の transform() メソッドには累積的な効果があることに注意してください。

(5) setTransform()

CanvasRenderingContext2D.setTransform() メソッドは、以前のグラフィック変換をキャンセルし、キャンバスをこのメソッドで指定された状態に復元します。このメソッドのパラメータは、transform() メソッドのパラメータとまったく同じです。

var キャンバス = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");

ctx.translate(50, 50);
ctx.fillRect(0, 0, 100, 100);

ctx.setTransform(1, 0, 0, 1, 0, 0);
ctx.fillRect(0, 0, 100, 100);

上記のコードでは、最初の fillRect() メソッドによって描画された四角形の左上隅が (0, 0) から (50, 50) に移動されます。 setTransform() メソッドは、この変換をキャンセルし (描画されたグラフィックは影響を受けません)、キャンバスをデフォルトの状態 (変換四角形 1, 0, 0, 1, 0, 0) に復元します。そのため、2 番目の四角形の左上隅は (0, 0) に戻ります。

キャンバス要素のメソッド

CanvasRenderingContext2D オブジェクトによって提供されるメソッドに加えて、<canvas> 要素自体にも独自のメソッドがあります。

htmlCanvasElement.toDataURL()

<canvas> 要素の toDataURL() メソッドは、Canvas データを Data URI 形式の画像に変換できます。

canvas.toDataURL(タイプ、品質);

toDataURL() メソッドは 2 つのパラメータを受け入れます。

type: 画像の形式を示す文字列。デフォルトは image/png ですが、別の可能な値は image/jpeg であり、Chrome ブラウザでは image/webp も使用できます。
quality: JPEG および WebP 画像の品質係数を表す 0 から 1 までの浮動小数点数。デフォルト値は 0.92 です。

このメソッドの戻り値は、Data URI 形式の文字列です。

関数 convertCanvasToImage(キャンバス) {
  var image = 新しい Image();
  image.src = canvas.toDataURL("image/png");
  画像を返します。
}

上記のコードは、<canvas> 要素を PNG データ URI に変換します。

var fullQuality = canvas.toDataURL("image/jpeg", 0.9);
var mediumQuality = canvas.toDataURL("image/jpeg", 0.6);
var lowQuality = canvas.toDataURL("image/jpeg", 0.3);

上記のコードは、<canvas> 要素を高品質、中品質、低品質の 3 つの JPEG 画像に変換します。

htmlCanvasElement.toBlob()

HTMLCanvasElement.toBlob() メソッドは、<canvas> イメージを Blob オブジェクトに変換するために使用されます。デフォルトのタイプは image/png です。使用形式は以下のとおりです。

// フォーマット canvas.toBlob(callback, mimeType, quality)

// 例 canvas.toBlob(function (blob) {...}, 'image/jpeg', 0.95)

toBlob() メソッドは 3 つのパラメータを受け入れることができます。

callback: コールバック関数。結果の Blob オブジェクトをパラメータとして受け入れます。
mimeType: 文字列、画像の MIMEType タイプ。デフォルトは image/png です。
quality: 画像の品質を示す 0 から 1 までの浮動小数点数。image/jpeg および image/webp タイプの画像にのみ有効です。

このメソッドには戻り値がないことに注意してください。

次の例では、<canvas> イメージを <img> イメージにコピーします。

var キャンバス = document.getElementById('myCanvas');

関数blobToImg(blob) {
  var newImg = document.createElement('img');
  var url = URL.createObjectURL(blob);

  newImg.onload = 関数() {
    // 使用後は、URL オブジェクトを解放します。URL.revokeObjectURL(url);
  };

  新しいImg.src = URL;
  document.body.appendChild(新しい画像)。
}

キャンバスをBlobに変換します。

キャンバスの使用例

アニメーション効果

座標を変更することで、Canvas 要素にアニメーション効果を簡単に作成できます。

var キャンバス = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");

var posX = 20;
var posY = 100;

setInterval(関数() {
  ctx.fillStyle = "黒";
  ctx.fillRect(0, 0, キャンバスの幅、キャンバスの高さ);

  位置X += 1;
  正Y += 0.25;

  ctx.beginPath();
  ctx.fillStyle = "白";

  ctx.arc(posX, posY, 10, 0, Math.PI * 2, true);
  ctx.closePath();
  ctx.fill();
}, 30);

上記のコードは、30 ミリ秒ごとに右下に移動する小さな点を生成します。 setInterval() 関数の始めでは、前の手順で小さなドットを消去するために、キャンバスが黒い背景で再レンダリングされます。

この例を基に、円の中心の座標を設定することで、さまざまな動作軌跡を生成できます。以下は、上昇移動の後に下降移動が続く例です。

var vx = 10;
var vy = -10;
var 重力 = 1;

setInterval(関数() {
  位置X + = vx;
  正位置Y += vy;
  vy += 重力;
  // ...
});

上記のコードでは、x 座標が増加し続け、右への連続的な移動を示しています。 y 座標は最初は小さくなり、その後、重力の作用により増加し続け、最初は上昇し、その後下降することを示しています。

ピクセル処理

getimagedata（）およびputimagedata（）メソッドを介して、各ピクセルを処理して画像コンテンツを操作できるため、画像を書き換えることができます。

以下は、画像処理を作成する一般的な方法です。

if（canvas.width> 0 && canvas.height> 0）{
  var imagedata = context.getimagedata（0、0、canvas.width、canvas.height）;
  フィルター（Imagedata）;
  Context.putimagedata（Imagedata、0、0）;
}

上記のコードでは、フィルターはピクセルを処理する関数です。以下はいくつかの一般的なフィルターです。

（1）グレースケール効果

グレースケールは、赤、緑、青のピクセル値の算術平均であり、実際に画像を白黒に変換します。

grayscale = function（pixels）{
  var d = pixels.data;
  for（var i = 0; i <d.length; i += 4）{
    var r = d [i];
    var g = d [i + 1];
    var b = d [i + 2];
    d [i] = d [i + 1] = d [i + 2] =（r + g + b） / 3;
  }
  ピクセルを返します。
};

上記のコードでは、d [i]は赤い値、d [i+1]は緑の値、d [i+2]は青色値、d [i+3]はアルファチャネル値です。グレースケールに変換するためのアルゴリズムは、赤、緑、青の値を追加し、3で除算し、結果を配列に戻すことです。

（2）レトロ効果

Sepia効果は、それぞれ赤、緑、青の値の特定の加重平均をとり、画像に昔ながらの効果を与えることです。

sepia = function（pixels）{
  var d = pixels.data;
  for（var i = 0; i <d.length; i += 4）{
    var r = d [i];
    var g = d [i + 1];
    var b = d [i + 2];
    d [i] = r * 0.393 + g * 0.769 + b * 0.189;
    d [i + 1] = r * 0.349 + g * 0.686 + b * 0.168;
    d [i + 2] = r * 0.272 + g * 0.534 + b * 0.131;
  }
  ピクセルを返します。
};

（3）赤いマスク効果

赤いマスクは、画像を赤みがかったように見せます。アルゴリズムは、赤いチャネルを赤、緑、青の値の平均に設定し、緑と青のチャネルを0に設定することです。

var red = function（pixels）{
  var d = pixels.data;
  for（var i = 0; i <d.length; i += 4）{
    var r = d [i];
    var g = d [i + 1];
    var b = d [i + 2];
    d [i] =（r + g + b） / 3;
  }
  ピクセルを返します。
};

（4）輝度効果

輝度効果とは、画像をより明るくまたは暗くすることを指します。アルゴリズムは、同時に赤いチャネル、緑のチャネル、青いチャネルに正または負の値を追加します。

var Brightness = function（pixels、delta）{
  var d = pixels.data;
  for（var i = 0; i <d.length; i += 4）{
    d [i] += delta;
    d [i + 1] + = delta;
    d [i + 2] + = delta;
  }
  ピクセルを返します。
};

（5）反転効果

反転効果（反転）は、画像が逆色の効果を示すことを意味します。アルゴリズムは、赤、緑、青の各チャネルのそれぞれの反対の値を取ることです（255-元の値）。

invert = function（pixels）{
  var d = pixels.data;
  for（var i = 0; i <d.length; i += 4）{
    d [i] = 255 -d [i];
    d [i + 1] = 255 -d [i + 1];
    d [i + 2] = 255 -d [i + 2];
  }
  ピクセルを返します。
};

上記は、JS Canvasインターフェイスとアニメーション効果の詳細なコンテンツです。123WordPress.comの他の関連記事に注意してください。

以下もご興味があるかもしれません: