キャンバスAPI

概要

<canvas> 要素は画像の生成に使用されます。これ自体は、JavaScript が API を操作して画像を生成するキャンバスのようなものです。その最下層はピクセルです。基本的に <canvas> は JavaScript で操作できるビットマップです。

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

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

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

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

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

var Canvas = document.getElementById('myCanvas');
var ctx = Canvas.getContext('2d');

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

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

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.drawing(): パスの線の色付け (デフォルトは黒)。
CanvasRenderingContext2D.fillStyle: パスの塗りつぶしの色とスタイルを指定します (デフォルトは黒)。
CanvasRenderingContext2D.drawingStyle: パスの線の色とスタイルを指定します (デフォルトは黒)。

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

上記のコードでは、両方のメソッドでパスを表示できます。 fill() はパスの内側を色で塗りつぶし、それを実線の形に変換します。

どちらのメソッドもデフォルトでは黒を使用しますが、fillStyle プロパティと drawingStyle プロパティを使用して他の色を指定できます。

ctx.fillStyle = '赤';
ctx.fill();
// または
ctx.ストロークスタイル = '赤';
ctx.ストローク();

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

線のスタイル

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

CanvasRenderingContext2D.lineWidth: 線の幅を指定します。デフォルトは 1.0 です。
CanvasRenderingContext2D.lineCap: 線の終端のスタイルを指定します: butt (デフォルト値、終端は長方形)、round (終端は円)、square' の 3 つの値があります。 (端は突き出た長方形です)、長方形の幅は変更されず、高さは線の幅の半分になります)。
CanvasRenderingContext2D.lineJoin: 線分交差のスタイルを指定します。可能な値は 3 つあります: round (交点が扇形)、bevel (交点が三角形の底辺)、miter。 (デフォルト値、交点はひし形です)。
CanvasRenderingContext2D.miterLimit: 交差するひし形の長さを指定します。デフォルトは 10 です。このプロパティは、lineJoin プロパティの値が miter と等しい場合にのみ有効です。
CanvasRenderingContext2D.getLineDash(): 線分の長さと点線内の間隔を表す配列を返します。
CanvasRenderingContext2D.setLineDash(): 線分の長さと点線内の間隔を指定するために使用される配列。

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

上記コードでは、線の幅を3とし、線の端と交点を角丸に変更し、点線に設定しています。

長方形

長方形の描画には次のメソッドが使用されます。

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

上記の 4 つのメソッドの形式は同じで、いずれも 4 つのパラメータ (長方形の左上隅の横座標と縦座標、および長方形の幅と高さ) を受け入れます。

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

var Canvas = document.getElementById('myCanvas');
var ctx = Canvas.getContext('2d');

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

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

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

var Canvas = document.getElementById('myCanvas');
var ctx = Canvas.getContext('2d');

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

上記のコードは緑色の四角形を描画し、左上隅の座標は (10, 10)、幅と高さは両方とも 100 です。

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

var Canvas = document.getElementById('myCanvas');
var ctx = Canvas.getContext('2d');

ctx.ストロークスタイル = '緑';
ctx.ストロークRect(10, 10, 100, 100);

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

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

var Canvas = 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, 半径, startAngle, endAngle, 反時計回り)

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

「arc()」メソッドの「x」パラメータと「y」パラメータは円の中心座標、「radius」は半径、「startAngle」と「endAngle」は扇形の開始角度と終了角度です（表現されています）。ラジアン単位)、反時計回り 描画を反時計回り (true) または時計回り (false) のどちらで描画するかを示します。このパラメーターは、セクター (上半円または下半円など) の方向を制御するために使用されます。

以下は実線の円を描く例です。

var Canvas = 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 Canvas = document.getElementById('myCanvas');
var ctx = Canvas.getContext('2d');

ctx.beginPath();
ctx.moveTo(50, 20);
ctx.arc(100, 20, 50, 0, Math.PI, false);
ctx.ストローク();

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

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

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

文章

テキストの描画には次のメソッドとプロパティが使用されます。

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

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

CanvasRenderingContext2D.fillText(text, x, y [, maxWidth])

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

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

var Canvas = document.getElementById('myCanvas');
var ctx = Canvas.getContext('2d');

ctx.fillText('Hello world', 50, 50);

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

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

中抜き文字を追加するには ストロークText() メソッドを使用します。そのパラメータは fillText() と同じです。

var Canvas = document.getElementById('myCanvas');
var ctx = Canvas.getContext('2d');

ctx.ストロークテキスト('Hello world', 50, 50);

上記の 2 つの方法で描画されるテキストは、デフォルトで 10px サイズと sans-serif フォントになります。font 属性はフォント設定を変更できます。このプロパティの値は文字列です。CSS の font プロパティを使用するだけです。

var Canvas = document.getElementById('myCanvas');
var ctx = Canvas.getContext('2d');

ctx.font = '太字 20px Arial';
ctx.fillText('Hello world', 50, 50);

textAlign プロパティは、テキストの配置を指定するために使用されます。次の値を取ることができます。

left: 左揃え
right: 右揃え
center: 中央揃え
start: デフォルト値、開始点の配置 (左から右へのテキストは左揃え、右から左へのテキストは右揃え)。
end: 終了位置揃え (左から右へのテキストは右揃え、右から左へのテキストは左揃え)。

var Canvas = document.getElementById('myCanvas');
var ctx = Canvas.getContext('2d');

ctx.font = '太字 20px Arial';
ctx.textAlign = 'センター';
ctx.fillText('Hello world', 50, 50);

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

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

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

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

var Canvas = document.getElementById('myCanvas');
var ctx = Canvas.getContext('2d');

var text1 = ctx.measureText('Hello world');
text1.width // 49.46

ctx.font = '太字 20px Arial';
var text2 = ctx.measureText('Hello world');
text2.width // 107.78

上記のコードでは、サイズ 10px の文字列 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 は CSS カラーを表す文字列です。

var Canvas = document.getElementById('myCanvas');
var ctx = Canvas.getContext('2d');

var gradient = ctx.createLinearGradient(0, 0, 200, 0);
gradient.addColorStop(0, '緑');
gradient.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 Canvas = document.getElementById('myCanvas');
var ctx = Canvas.getContext('2d');

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

上記のコードでは、放射パターンを生成した後、長方形がこのパターンで塗りつぶされます。

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

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

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

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

var Canvas = document.getElementById('myCanvas');
var ctx = Canvas.getContext('2d');

var img = 新しい画像();
img.src = 'https://example.com/pattern.png';
img.onload = function( ) {
  var pattern = ctx.createPattern(img, 'repeat');
  ctx.fillStyle = パターン;
  ctx.fillRect(0, 0, 400, 400);
};

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

影

影の設定には次のプロパティが使用されます。

CanvasRenderingContext2D.shadowBlur: 影のぼかしレベル。デフォルトは 0 です。
CanvasRenderingContext2D.shadowColor: 影の色。デフォルトは black です。
CanvasRenderingContext2D.shadowOffsetX: 影の水平方向の変位、デフォルトは 0 です。
CanvasRenderingContext2D.shadowOffsetY: 影の垂直方向の変位、デフォルトは 0 です。

以下に例を示します。

var Canvas = 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(image, dx, dy, dWidth, dHeight);
ctx.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);

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

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

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

var Canvas = document.getElementById('myCanvas');
var ctx = Canvas.getContext('2d');

var img = 新しい画像();
img.src = '画像.png';
img.onload = 関数 () {
  ctx.drawImage(img, 0, 0);
};

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

画像全体を表示したい場合は、画像の幅と高さを使用して、それをキャンバスの幅と高さに設定します。

var Canvas = document.getElementById('myCanvas');
var ctx = Canvas.getContext('2d');

var image = 新しい画像(60, 45);
image.onload =drawImageActualSize;
image.src = 'https://example.com/image.jpg';

関数drawImageActualSize() {
  Canvas.width = this.naturalWidth;
  Canvas.height = 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)getImageData()

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

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

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

var Canvas = 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)putImageData()

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

ctx.putImageData(画像データ, dx, dy)
ctx.putImageData(画像データ、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(画像データ, 0, 0);

(3)createImageData()

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

ctx.createImageData(幅, 高さ)
ctx.createImageData(画像データ)

createImageData()メソッドのパラメータは以下の通りです。

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

var Canvas = 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 Canvas = document.getElementById('myCanvas');
var ctx = Canvas.getContext('2d');

ctx.save();

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

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

コンテキスト、restore メソッドは、最後に保存されたコンテキストに復元するために使用されます。

var Canvas = document.getElementById('myCanvas');
var ctx = Canvas.getContext('2d');

ctx.save();

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

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

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

CanvasRenderingContext2D.canvas

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

var Canvas = 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 Canvas = 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 Canvas = 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 Canvas = document.getElementById('myCanvas');
var ctx = Canvas.getContext('2d');

ctx.scale(1, -2);
ctx.font = "16px セリフ";
ctx.fillText('Hello world!', 20, -20);

上記のコードは、左右反転した「Hello World!」を高さ 2 倍に拡大して表示します。

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

(3)翻訳()

画像の翻訳には「CanvasRenderingContext2D.translate()」メソッドが使用されます。これは、x 軸と y 軸の移動の距離 (単位ピクセル) である 2 つのパラメーターを受け入れます。

var Canvas = document.getElementById('myCanvas');
var ctx = Canvas.getContext('2d');

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

(4)transform()

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

利用形式は以下の通りです。

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

以下に例を示します。

var Canvas = 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 Canvas = 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) に戻します。左隅は (0, 0) に戻ります。

`<canvas>` 要素メソッド

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

HTMLCanvasElement.toDataURL()

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

Canvas.toDataURL(タイプ、品質)

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

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

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

関数 ConvertCanvasToImage(canvas) {
  var image = 新しい画像();
  image.src = Canvas.toDataURL('image/png');
  画像を返す;
}

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

var fullQuality = Canvas.toDataURL('image/jpeg', 0.9);
var mediaQuality = 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(コールバック、mimeType、品質)

// 例
Canvas.toBlob(関数 (ブロブ) {...}, '画像/jpeg', 0.95)

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

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

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

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

var Canvas = document.getElementById('myCanvas');

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

  newImg.onload = function () {
    //使用後はURLオブジェクトを解放する
    URL.revokeObjectURL(url);
  };

  newImg.src = URL;
  document.body.appendChild(newImg);
}

Canvas.toBlob(blobToImg);

Canvasの使用例

アニメーション効果

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

var Canvas = document.getElementById('myCanvas');
var ctx = Canvas.getContext('2d');

var posX = 20;
var posY = 100;

setInterval(関数() {
  ctx.fillStyle = '黒';
  ctx.fillRect(0, 0, Canvas.width, Canvas.height);

  posX += 1;
  posY += 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(関数() {
  posX += vx;
  posY += vy;
  vy += 重力;
  // ...
});

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

ピクセル処理

getImageData() メソッドと putImageData() メソッドを使用すると、各ピクセルを処理して画像の内容を操作し、画像を書き換えることができます。

以下は画像処理の一般的な記述方法です。

if (canvas.width > 0 && Canvas.height > 0) {
  var imageData = context.getImageData(0, 0, Canvas.width, Canvas.height);
  フィルター(画像データ);
  context.putImageData(imageData, 0, 0);
}

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

(1)グレースケール効果

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

グレースケール = 関数 (ピクセル) {
  var d = ピクセル.データ;
  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 つの値を加算し、3 で割って、結果を配列に書き戻すことです。

(2)レトロ効果

レトロ効果（セピア）とは、赤、緑、青の 3 つの値を取得し、これら 3 つの値の一定の加重平均をとり、画像に古風な効果を与えることです。

セピア = 関数 (ピクセル) {
    var d = ピクセル.データ;
    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) 赤いマスク効果

レッドマスクとは、画像に赤みを帯びた効果を与えることを指します。アルゴリズムは、赤チャネルを赤、緑、青の 3 つの値の平均に設定し、緑チャネルと青チャネルの両方を 0 に設定します。

var red = 関数 (ピクセル) {
  var d = ピクセル.データ;
  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; // 赤のチャネルを平均します。
    d[i + 1] = d[i + 2] = 0; // 緑と青のチャネルは両方とも 0 に設定されます。
  }
  ピクセルを返します。
};

(4)明るさ効果

明るさとは、画像を明るくしたり暗くしたりすることを指します。このアルゴリズムは、赤チャネル、緑チャネル、および青チャネルに正または負の値を加算します。

var 明るさ = 関数 (ピクセル, デルタ) {
  var d = ピクセル.データ;
  for (var i = 0; i < d.length; i += 4) {
    d[i] += デルタ;
    d[i + 1] += デルタ;
    d[i + 2] += デルタ;
  }
  ピクセルを返します。
};

(5) 反転効果

反転効果（インバート）とは、色が反転した絵の効果を指します。このアルゴリズムは、赤、緑、青の各チャネルの反対の値 (「255 - 元の値」) を取得します。

反転 = 関数 (ピクセル) {
  var d = ピクセル.データ;
  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];
  }
  ピクセルを返します。
};

参考リンク

David Walsh、JavaScript Canvas 画像変換
Matt West、Canvas API の概要
John Robinson、HTML5 キャンバスを使用してクールな画像効果を行う方法 -キャンバス/）
Ivaylo Gerchev、HTML5 Canvas チュートリアル: 概要
Donovan Hutchinson、キャンバス内の粒子