JavaScript Console

　実行結果表示エリア(コンソール)には、グラフィックの表示ができる Canvas 要素(640x400 pixel)が張り付けてあります。ここにグラフィックの表示を行うには、document.getElementById 関数によって、'jsccanvas' という Canvas 要素を取り出します。そして、二次元グラフィック描画用のコンテキストを getContext 関数で取り出し、描画命令を実行します。
　描画領域をクリアするには、clearRect 関数などを利用します。

　以降のサンプルは、▶ Run ボタンを押すことで、プログラムを実行します。

var canvas = document.getElementById('jsccanvas');
var context = canvas.getContext('2d');
context.clearRect(0, 0, 640, 400);

context.fillStyle='rgb(32, 32, 64)';
context.fillRect(0, 0, 640, 400);

context.beginPath();
context.fillStyle = 'rgba(255, 0, 0, 0.4)';
context.arc(210, 135, 105, 0, Math.PI*2, false);
context.fill();
context.beginPath();
context.fillStyle = 'rgba(0, 255, 0, 0.4)';
context.arc(135, 285, 105, 0, Math.PI*2, false);
context.fill();
context.beginPath();
context.fillStyle = 'rgba(0, 0, 255, 0.4)';
context.arc(285, 285, 105, 0, Math.PI*2, false);
context.fill();

context.beginPath();
context.strokeStyle='rgb(255, 255, 255)';
context.moveTo(0, 0);
context.lineTo(640, 400);
context.stroke();

context.beginPath();
context.strokeStyle='rgb(255, 255, 0)';
context.moveTo(500, 50);
context.lineTo(501, 51);
context.stroke();

context.beginPath();
context.fillStyle = 'rgb(128, 0, 128)';
context.moveTo(500, 100);
context.lineTo(450, 150);
context.lineTo(550, 150);
context.fill();

context.fillStyle = 'rgb(255, 255, 255)';
context.fillText("GraphicArea (640, 400)", 530, 390);

長方形

strokeRect(x, y, w, h)

　長方形の輪郭を描画します。

strokeRect(x, y, w, h) : 長方形の輪郭描画

x : 長方形の左上 x 座標
y : 長方形の左上 y 座標
w : 長方形の幅
h : 長方形の高さ

var cx = document.getElementById('jsccanvas').getContext('2d');
cx.strokeStyle = 'rgb(255, 255, 0)';

cx.strokeRect(400, 200, 100, 100);

fillRect(x, y, w, h)

　長方形を塗潰して描画します。

fillRect(x, y, w, h) : 長方形を塗潰し描画

x : 長方形の左上 x 座標
y : 長方形の左上 y 座標
w : 長方形の幅
h : 長方形の高さ

var cx = document.getElementById('jsccanvas').getContext('2d');
cx.fillStyle = 'rgb(255, 255, 0)';

cx.fillRect(400, 200, 100, 100);

clearRect(x, y, w, h)

　長方形の領域をクリアします。

clearRect(x, y, w, h) : 長方形領域クリア

x : 長方形の左上 x 座標
y : 長方形の左上 y 座標
w : 長方形の幅
h : 長方形の高さ

var cx = document.getElementById('jsccanvas').getContext('2d');
cx.fillStyle = 'rgb(255, 255, 0)';
cx.fillRect(350, 150, 200, 200);

cx.clearRect(400, 200, 100, 100);

パス

beginPath()

　現在のパスをリセットして、パスを開始します。

beginPath() : パスの開始

moveTo(x, y)

　パスを移動します。

moveTo(x, y) : パスの移動

x : 移動先の x 座標
y : 移動先の y 座標

lineTo(x, y)

　直線を追加します。

lineTo(x, y) : 直線の追加

x : 直線を引く x 座標
y : 直線を引く y 座標

closePath()

　開始座標と終了座標を結んでパスを閉じます。

closePath() : パスを閉じる

stroke()

　パスの輪郭を描画します。

stroke() : パスの輪郭描画

fill()

　パスを塗潰して描画します。

fill() : パスの塗潰し描画

var cx = document.getElementById('jsccanvas').getContext('2d');
cx.strokeStyle = 'rgb(255, 255, 0)';
cx.fillStyle = 'rgb(255, 255, 0)';

cx.beginPath();
cx.moveTo(400, 100);
cx.lineTo(400, 150);
cx.lineTo(600, 150);
cx.lineTo(600, 100);
cx.stroke();

cx.beginPath();
cx.moveTo(400, 200);
cx.lineTo(400, 250);
cx.lineTo(600, 250);
cx.lineTo(600, 200);
cx.closePath();
cx.stroke();

cx.beginPath();
cx.moveTo(400, 300);
cx.lineTo(400, 350);
cx.lineTo(600, 350);
cx.lineTo(600, 300);
cx.fill();

rect(x, y, w, h)

　長方形を描画します。

rect(x, y, w, h) : 長方形の描画

x : 長方形の左上 x 座標
y : 長方形の左上 y 座標
w : 長方形の幅
h : 長方形の高さ

var cx = document.getElementById('jsccanvas').getContext('2d');
cx.strokeStyle = 'rgb(255, 255, 0)';
cx.fillStyle = 'rgb(255, 255, 0)';

cx.beginPath();
cx.rect(400, 100, 100, 100);
cx.stroke();

cx.beginPath();
cx.rect(400, 250, 100, 100);
cx.fill();

arcTo(x1, y1, x2, y2, r)

　直線で結合する円弧を描画します。

arcTo(x1, y1, x2, y2, r) : 直線で結合する円弧の描画

x1 : 円と接する直線の x 座標
y1 : 円と接する直線の y 座標
x2 : 円と接する直線の x 座標
y2 : 円と接する直線の y 座標
r : 円の半径

var cx = document.getElementById('jsccanvas').getContext('2d');
cx.strokeStyle = 'rgb(255, 255, 0)';

cx.beginPath();
cx.moveTo(400, 100);
cx.arcTo(500, 100, 500, 200, 50);
cx.lineTo(500,200);
cx.stroke();

quadraticCurveTo(cpx, cpy, x, y)

　２次ベジェ曲線を描画します。

quadraticCurveTo(cpx, cpy, x, y) : ２次ベジェ曲線の描画

cpx : 制御点の x 座標
cpy : 制御点の y 座標
x : 終点の x 座標
y : 終点の y 座標

var cx = document.getElementById('jsccanvas').getContext('2d');
cx.strokeStyle = 'rgb(255, 255, 0)';

cx.beginPath();
cx.moveTo(400, 100);
cx.quadraticCurveTo(500, 100, 500, 200);
cx.stroke();

bezierCurveTo(cpx, cpy, x, y)

　３次ベジェ曲線を描画します。

bezierCurveTo(cpx1, cpy1, cpx2, cpy2, x, y) : ３次ベジェ曲線の描画

cpx1 : 制御点１の x 座標
cpy1 : 制御点１の y 座標
cpx2 : 制御点２の x 座標
cpy2 : 制御点２の y 座標
x : 終点の x 座標
y : 終点の y 座標

var cx = document.getElementById('jsccanvas').getContext('2d');
cx.strokeStyle = 'rgb(255, 255, 0)';

cx.beginPath();
cx.moveTo(400, 100);
cx.bezierCurveTo(480, 100, 500, 120, 500, 200);
cx.stroke();

clip()

　描画領域をクリップします。

clip() : 描画領域のクリップ

var cx = document.getElementById('jsccanvas').getContext('2d');
cx.fillStyle = 'rgb(255, 255, 0)';

cx.beginPath();
cx.moveTo(400, 100);
cx.lineTo(300, 300);
cx.lineTo(500, 300);
cx.stroke();
cx.clip();
cx.fillRect(350, 150, 100, 100);

isPointInPath(x, y)

　座標がパス内にあれば真を返します。

isPointInPath(x, y) : 座標がパス内にあるか

x : 調査点の x 座標
y : 調査点の y 座標

var cx = document.getElementById('jsccanvas').getContext('2d');

cx.beginPath();
cx.rect(400, 200, 200, 200);
cx.stroke();
console.log(cx.isPointInPath(500, 300));
console.log(cx.isPointInPath(100, 100));

円

arc(x, y, r, startAngle, endAngle, ccw)

　円・円弧・円塗潰し・円弧塗潰しを描画します。

arc(x, y, r, startAngle, endAngle, ccw) : 円の描画

x : 円の中心 x 座標
y : 円の中心 y 座標
r : 円の半径
startAngle : 長方形の幅(三時方向が０°)
endAngle : 長方形の高さ
ccw : 円弧の方向　反時計回り(true) 時計回り(false)

var cx = document.getElementById('jsccanvas').getContext('2d');
cx.strokeStyle = 'rgb(255, 255, 0)';
cx.fillStyle = 'rgb(255, 255, 0)';

cx.beginPath();
cx.arc(400, 150, 50, 0, 2*Math.PI, true);
cx.stroke();

cx.beginPath();
cx.arc(550, 150, 50, 0, Math.PI, true);
cx.stroke();

cx.beginPath();
cx.arc(400, 300, 50, 0, 2*Math.PI, true);
cx.fill();

cx.beginPath();
cx.arc(550, 300, 50, 0, Math.PI, false);
cx.fill();

ラインスタイル

lineWidth

　描画輪郭の線幅を設定します。

lineWidth = number : 線幅の設定

number : 線幅

var cx = document.getElementById('jsccanvas').getContext('2d');
cx.strokeStyle = 'rgb(255, 255, 0)';

cx.lineWidth = 10;
cx.beginPath();
cx.moveTo(400, 100);
cx.lineTo(600, 100);
cx.stroke();

cx.lineWidth = 20;
cx.beginPath();
cx.moveTo(400, 150);
cx.lineTo(600, 150);
cx.stroke();

cx.lineWidth = 50;
cx.beginPath();
cx.moveTo(400, 300);
cx.lineTo(600, 300);
cx.stroke();

lineCap

　線端の形状を設定します。

lineCap = 'butt' : フラット端
lineCap = 'round' : 丸い端
lineCap = 'square' : 四角い端

var cx = document.getElementById('jsccanvas').getContext('2d');
cx.strokeStyle = 'rgb(255, 255, 0)';
cx.lineWidth = 30;

cx.lineCap = 'butt';
cx.beginPath();
cx.moveTo(400, 100);
cx.lineTo(600, 100);
cx.stroke();

cx.lineCap = 'round';
cx.beginPath();
cx.moveTo(400, 200);
cx.lineTo(600, 200);
cx.stroke();

cx.lineCap = 'square';
cx.beginPath();
cx.moveTo(400, 300);
cx.lineTo(600, 300);
cx.stroke();

lineJoin

　線結合の形状を設定します。

lineJoin = 'bevel' : 面取りして結合
lineJoin = 'round' : 丸く結合
lineJoin = 'miter' : 面取りなしで結合

var cx = document.getElementById('jsccanvas').getContext('2d');
cx.strokeStyle = 'rgb(255, 255, 0)';
cx.lineWidth = 20;

cx.lineJoin = 'bevel';
cx.beginPath();
cx.moveTo(400, 150);
cx.lineTo(500,  50);
cx.lineTo(600, 150);
cx.stroke();

cx.lineJoin = 'round';
cx.beginPath();
cx.moveTo(400, 250);
cx.lineTo(500, 150);
cx.lineTo(600, 250);
cx.stroke();

cx.lineJoin = 'miter';
cx.beginPath();
cx.moveTo(400, 350);
cx.lineTo(500, 250);
cx.lineTo(600, 350);
cx.stroke();

miterLimit

　折れ線箇所の面取り限界値を設定します。

miterLimit = number : 折れ線の限界値

number : 限界比率

var cx = document.getElementById('jsccanvas').getContext('2d');
cx.strokeStyle = 'rgb(255, 255, 0)';
cx.lineWidth = 20;

cx.miterLimit = 2.0;
cx.beginPath();
cx.moveTo(400, 150);
cx.lineTo(500,  50);
cx.lineTo(600, 150);
cx.stroke();

cx.beginPath();
cx.moveTo(420, 250);
cx.lineTo(500, 150);
cx.lineTo(580, 250);
cx.stroke();

cx.beginPath();
cx.moveTo(450, 350);
cx.lineTo(500, 250);
cx.lineTo(550, 350);
cx.stroke();

色・グラデーション・パターン

strokeStyle

　輪郭の色・グラデーション・パターンを設定します。

strokeStyle = 色・グラデーション・パターン

fillStyle

　塗潰し色・グラデーション・パターンを設定します。

fillStyle = 色・グラデーション・パターン

#rrggbb rgb(r,g,b) rgba(r,g,b,a) hsl(h,s,l) hsla(h,s,l,a) 色名

　色を指定します。

#rrggbb : 16進数(00-ff)で、赤・青・緑を指定
rgb(r, g, b) : 数値(0-255または0-100%)で、赤・青・緑を指定
rgba(r, g, b, alpha) : 数値(0-255または0-100%)で赤・青・緑を指定、数値(0.0-1.0)で透明度を指定
hsl(h, s, l) : 色相(0-360)、彩度(0-100%)、輝度(0-100%)を指定
hsla(h, s, l, alpha) : 色相(0-360)、彩度(0-100%)、輝度(0-100%)、透明度(0.0-1.0)を指定
色名 : Red, Green, Blueなどの名前を指定

var cx = document.getElementById('jsccanvas').getContext('2d');

cx.fillStyle = '#ff0000';
cx.fillRect(400,  50, 50, 50);

cx.fillStyle = 'rgb(255, 255, 0)';
cx.fillRect(400, 100, 50, 50);

cx.fillStyle = 'rgba(255, 255, 0, 0.5)';
cx.fillRect(400, 150, 50, 50);

cx.fillStyle = 'hsl(120, 50%, 50%)';
cx.fillRect(400, 200, 50, 50);

cx.fillStyle = 'hsla(120, 50%, 50%, 0.5)';
cx.fillRect(400, 250, 50, 50);

cx.fillStyle = 'Brown';
cx.fillRect(400, 300, 50, 50);

globalAlpha

　透明度を設定します。

globalAlpha = number : 透明度を設定

number : 透明度(0.0-1.0)

var cx = document.getElementById('jsccanvas').getContext('2d');

cx.fillStyle = 'rgb(255, 255, 0)';
cx.fillRect(400,  50, 100, 100);

cx.globalAlpha = 0.5;
cx.fillStyle = 'rgb(0, 255, 255)';
cx.fillRect(450, 100, 100, 100);

addColorStop(stop, color)

　グラデーションの色を設定します。

addColorStop(stop, color) : グラデーション色設定

stop : 色指定位置(0.0-1.0)
color : 指定色

createLinearGradient(x0, y0, x1, y1)

　線形グラデーションを設定します。

createLinearGradient(x0, y0, x1, y1) : 線形グラデーション設定

x0 : グラデーション開始 x 座標
y0 : グラデーション開始 y 座標
x1 : グラデーション終了 x 座標
y1 : グラデーション終了 y 座標

var cx = document.getElementById('jsccanvas').getContext('2d');

var gradient = cx.createLinearGradient(400, 100, 500, 200);
    gradient.addColorStop(0, 'rgb(255, 255, 0)');
    gradient.addColorStop(1, 'rgb(0, 255, 255)');

cx.fillStyle = gradient;
cx.fillRect(400, 100, 100, 100);

createRadialGradient(x0, y0, r0, x1, y1, r1)

　円形グラデーションを設定します。

createRadialGradient(x0, y0, r0, x1, y1, r1) : 円形グラデーション設定

x0 : グラデーション開始円中心 x 座標
y0 : グラデーション開始円中心 y 座標
r0 : グラデーション開始円半径
x1 : グラデーション終了円中心 x 座標
y1 : グラデーション終了円中心 y 座標
r1 : グラデーション終了円半径

var cx = document.getElementById('jsccanvas').getContext('2d');

var gradient = cx.createRadialGradient(500, 200, 0, 500, 250, 100);
    gradient.addColorStop(0, 'rgb(255, 255, 0)');
    gradient.addColorStop(1, 'rgb(0, 255, 255)');

cx.fillStyle = gradient;
cx.fillRect(400, 100, 200, 200);

createPattern(image, repeat)

　塗潰しパターンを設定します。

createPattern(image, repeat) : 塗潰しパターン設定

image : 塗潰し画像
repeat : 'repeat'　　x 軸、y 軸共繰り返し
repeat : 'repeat-x' 　x 軸方向のみ繰り返し
repeat : 'repeat-y' 　y 軸方向のみ繰り返し
repeat : 'no-repeat'　繰り返しなし

テスト画像

var cx = document.getElementById('jsccanvas').getContext('2d');

var img = document.getElementById('testimage');
var pattern = cx.createPattern(img, 'repeat');

cx.fillStyle = pattern;
cx.fillRect(400, 100, 200, 200);

シャドウ

shadowColor

　シャドウ色を設定します。

shadowColor = color : シャドウ色設定

color : シャドウ色

shadowOffsetX

　シャドウの x 方向オフセット距離を設定します。

shadowOffsetX = number : x 方向オフセット距離設定

number : 距離

shadowOffsetY

　シャドウの y 方向オフセット距離を設定します。

shadowOffsetY = number : y 方向オフセット距離設定

number : 距離

shadowBlur

　シャドウのレベルを設定します。

shadowBlur = number : シャドウレベル設定

number : シャドウレベル

var cx = document.getElementById('jsccanvas').getContext('2d');
cx.fillStyle = 'rgb(255, 255, 0)';

cx.shadowColor = 'gray';
cx.shadowOffsetX = 10;
cx.shadowOffsetY = 10;
cx.shadowBlur = 5;
cx.fillRect(400, 100, 100, 100);

テキスト・フォント

strokeText(string, x, y [, maxWidth])

　テキストの輪郭を指定座標に描画します。

strokeText(string, x, y [, maxWidth]) : テキスト輪郭の描画

string : 描画する文字列
x : 描画位置 x 座標
y : 描画位置 y 座標
maxWidth : 描画領域の最大幅[オプション]

var cx = document.getElementById('jsccanvas').getContext('2d');
cx.strokeStyle = 'rgb(0, 255, 255)';
cx.fillStyle = 'rgb(255, 255, 0)';
cx.font = '40px serif';

cx.strokeText('abc漢字', 400, 100);

cx.strokeText('abc漢字', 400, 150, 50);

fillText(string, x, y [, maxWidth])

　テキストを指定座標に描画します。

fillText(string, x, y [, maxWidth]) : テキストの描画

string : 描画する文字列
x : 描画位置 x 座標
y : 描画位置 y 座標
maxWidth : 描画領域の最大幅[オプション]

var cx = document.getElementById('jsccanvas').getContext('2d');
cx.strokeStyle = 'rgb(0, 255, 255)';
cx.fillStyle = 'rgb(255, 255, 0)';
cx.font = '40px serif';

cx.fillText('abc漢字', 400, 100);

cx.fillText('abc漢字', 400, 150, 50);

measureText(string)

　テキストの描画幅を調べます。

measureText(string) : テキストの描画情報

var cx = document.getElementById('jsccanvas').getContext('2d');

console.log(cx.measureText('abcde漢字').width);

font = 'font-style font-variant font-weight font-size/line-height font-family'

　テキストのフォントを指定します。

font = 'font-style font-variant font-weight font-size/line-height font-family' : フォント設定

font-style : normal,italic,oblique
font-variant : normal,small-caps
font-weight : normal,bold,bolder,lighter,100,..,900
font-size : ピクセル(必須)
line-height : ピクセル
font-family : フォント名(必須) sans-serif,serif,cursive,fantasy,monospace

var cx = document.getElementById('jsccanvas').getContext('2d');
cx.fillStyle = 'rgb(255, 255, 0)';

cx.font = '20px "ＭＳ ゴシック"';
cx.fillText('abcde漢字', 400, 100);

cx.font = 'bold 20px "ＭＳ 明朝"';
cx.fillText('abcde漢字', 400, 150);

cx.font = 'italic small-caps bold 20px arial';
cx.fillText('abcde漢字', 400, 200);

textAlign = start|end|left|right|center

　テキスト揃え位置を指定します。

textAlign = 'start' : テキストの開始位置を揃える
textAlign = 'end' : テキストの終了位置を揃える
textAlign = 'left' : テキストの開始位置を揃える
textAlign = 'right' : テキストの終了位置を揃える
textAlign = 'center' : テキストを中央へ揃える

var cx = document.getElementById('jsccanvas').getContext('2d');
cx.strokeStyle = 'rgb(255, 0, 0)';
cx.fillStyle = 'rgb(255, 255, 0)';

cx.beginPath();
cx.moveTo(500,  50);
cx.lineTo(500, 400);
cx.stroke();

cx.font = '20px serif';

cx.fillText('abcdefg', 500, 100);
cx.fillText('abcd', 500, 120);

cx.textAlign = 'start';
cx.fillText('abcdefg', 500, 150);
cx.fillText('abcd', 500, 170);
cx.textAlign = 'end';
cx.fillText('abcdefg', 500, 200);
cx.fillText('abcd', 500, 220);
cx.textAlign = 'left';
cx.fillText('abcdefg', 500, 250);
cx.fillText('abcd', 500, 270);
cx.textAlign = 'right';
cx.fillText('abcdefg', 500, 300);
cx.fillText('abcd', 500, 320);
cx.textAlign = 'center';
cx.fillText('abcdefg', 500, 350);
cx.fillText('abcd', 500, 370);

textBaseline

　テキストのベースライン位置を設定します。

textBaseline = 'alphabetic' : アルファベットのベースラインに設定
textBaseline = 'top' : ベースラインを上端に設定
textBaseline = 'hanging' : ベースラインをハンギング位置に設定
textBaseline = 'middle' : ベースラインを中間に設定
textBaseline = 'ideographic' : 漢字のベースラインに設定
textBaseline = 'bottom' : ベースラインを下端

var cx = document.getElementById('jsccanvas').getContext('2d');
cx.strokeStyle = 'rgb(255, 0, 0)';
cx.fillStyle = 'rgb(255, 255, 0)';

cx.beginPath();
cx.moveTo( 10, 350);
cx.lineTo(640, 350);
cx.stroke();

cx.font = '20px serif';

cx.fillText('Noxyz',  20, 350);

cx.textBaseline = 'top';
cx.fillText('TopXyz', 70, 350);
cx.textBaseline = 'bottom';
cx.fillText('BottomXyz', 100, 350);
cx.textBaseline = 'middle';
cx.fillText('MiddleXyz', 195, 350);
cx.textBaseline = 'alphabetic';
cx.fillText('AlphabeticXyz', 290, 350);
cx.textBaseline = 'hanging';
cx.fillText('HangingXyz', 410, 350);
cx.textBaseline = 'ideographic';
cx.fillText('IdeographicXyz', 510, 350);

画像

drawImage(image, [sx, sy, sw, sh,] dx, dy[, dw, dh])

　画像を描画します。

drawImage(image, dx, dy) : 画像の描画
drawImage(image, dx, dy, dw, dh) : 画像の描画
drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh) : 画像の描画

image : 画像
sx : 元画像のクリップ位置 x 座標
sy : 元画像のクリップ位置 y 座標
sw : 元画像のクリップ幅
sh : 元画像のクリップ高さ
dx : 描画位置 x 座標
dy : 描画位置 y 座標
dw : 描画画像幅
dh : 描画画像高さ

var cx = document.getElementById('jsccanvas').getContext('2d');

var img = document.getElementById('testimage');

cx.drawImage(img, 500, 100);

cx.drawImage(img, 500, 200, 80, 40);

cx.drawImage(img, 10, 20, 80, 20, 500, 300, 100, 50);

ピクセル操作

createImageData(w, h)

　ImageData オブジェクトを生成します。

imagedata = createImageData(w, h) : ImageData の生成
imagedata = createImageData(oldimagedata) : 元ImageData と同じ幅・高さの ImageData の生成

imagedata : ImageData オブジェクト
imagedata.width: ImageData オブジェクトの幅
imagedata.height : ImageData オブジェクトの高さ
imagedata.data : ImageData オブジェクトデータの一次元配列
imagedata.data[i*4+0] : i 番目ピクセルの赤色(0-255)設定
imagedata.data[i*4+1] : i 番目ピクセルの緑色(0-255)設定
imagedata.data[i*4+2] : i 番目ピクセルの青色(0-255)設定
imagedata.data[i*4+3] : i 番目ピクセルの透明度(0-255)設定
w : 画像データの幅
h : 画像データの高さ
oldimagedata : 元となるImageData オブジェクト

getImageData(x, y, w, h)

　Canvas の指定範囲から ImageData オブジェクトを生成します。

imagedata = getImageData(x, y, w, h) : Canvas の指定範囲から ImageData の生成

imagedata : ImageData オブジェクト
x : Canvas のクリップ位置 x 座標
y : Canvas のクリップ位置 y 座標
w : Canvas のクリップ幅
h : Canvas のクリップ高さ

putImageData(imagedata, x, y[, sx, sy, sw, sh])

　ImageData オブジェクトを描画します。

putImageData(imagedata, x, y) : ImageData の描画
putImageData(imagedata, x, y, sx, sy, sw, sh) : ImageData の描画

imagedata : ImageData オブジェクト
x : 描画位置 x 座標
y : 描画位置座標
sx : ImageData のクリップ位置 x 座標
sy : ImageData のクリップ位置 y 座標
sw : ImageData のクリップ幅
sh : ImageData のクリップ高さ

var cx = document.getElementById('jsccanvas').getContext('2d');

var imagedata = cx.createImageData(256, 256);

for(var i=0; i < imagedata.data.length; i += 4) {
  imagedata.data[i+0] = (i / 4) % 256;
  imagedata.data[i+1] = (i / 4 / 256) % 256;
  imagedata.data[i+2] = 255 - imagedata.data[i+1];
  imagedata.data[i+3] = 128;
}
cx.putImageData(imagedata,  50, 100);

var imageget = cx.getImageData(50, 100, 256, 256);
for(var i=0; i < imageget.data.length; i += 4) {
  var v = (imageget.data[i+0]+imageget.data[i+1]+imageget.data[i+2])/3;
  imageget.data[i+0] = v;
  imageget.data[i+1] = v;
  imageget.data[i+2] = v;
  imageget.data[i+3] = imageget.data[i+3];
}
cx.putImageData(imageget, 350, 100);

変形

scale(scalewidth, scaleheight)

　以後の描画を拡大縮小します。

scale(scalewidth, scaleheight) : 拡大縮小倍率の設定

scalewidth : x 方向の拡大縮小倍率
scaleheight : y 方向の拡大縮小倍率

var cx = document.getElementById('jsccanvas').getContext('2d');
cx.strokeStyle = 'rgb(255, 255, 0)';

cx.strokeRect(10, 10, 100, 100);
cx.scale(2, 1);
cx.strokeRect(10, 10, 100, 100);
cx.scale(1, 2);
cx.strokeRect(10, 10, 100, 100);
cx.scale(2, 2);
cx.strokeRect(10, 10, 100, 100);

rotate(angle)

　以後の描画を回転します。

rotate(angle) : 回転角度の設定

angle : 角度

var cx = document.getElementById('jsccanvas').getContext('2d');
cx.strokeStyle = 'rgb(255, 255, 0)';

cx.strokeRect(400, 50, 100, 100);
cx.rotate(Math.PI / 12);
cx.strokeRect(400, 50, 100, 100);
cx.rotate(Math.PI / 12);
cx.strokeRect(400, 50, 100, 100);
cx.rotate(Math.PI / 12);
cx.strokeRect(400, 50, 100, 100);

translate(x, y)

　以後の描画の原点の位置を移動します。

translate(x, y) : 原点移動

x : 移動原点 x 座標
y : 移動原点 y 座標

var cx = document.getElementById('jsccanvas').getContext('2d');
cx.strokeStyle = 'rgb(255, 255, 0)';

cx.strokeRect(10, 10, 100, 100);
cx.translate(100, 100);
cx.strokeRect(10, 10, 100, 100);
cx.translate(100, 100);
cx.strokeRect(10, 10, 100, 100);

transform(a, b, c, d, e, f)

　現在の変換行列に、掛け合わせて新しい変換行列を設定します。

transform(a, b, c, d, e, f) : 変換行列の掛け合わせ

a : 伸縮 x
b : 傾斜 x
c : 傾斜 y
d : 伸縮 y
e : 移動 x
f : 移動 y

var cx = document.getElementById('jsccanvas').getContext('2d');
cx.strokeStyle = 'rgb(255, 255, 0)';

cx.strokeRect(10, 10, 100, 100);
cx.transform(1.5, 0.5, -0.5, 1.5, 50, 50);
cx.strokeRect(10, 10, 100, 100);
cx.transform(1.5, 0.5, -0.5, 1.5, 50, 50);
cx.strokeRect(10, 10, 100, 100);

setTransform(a, b, c, d, e, f)

　現在の変換行列に替えて、新しい変換行列を設定します。

setTransform(a, b, c, d, e, f) : 変換行列の設定

a : 伸縮 x
b : 傾斜 x
c : 傾斜 y
d : 伸縮 y
e : 移動 x
f : 移動 y

var cx = document.getElementById('jsccanvas').getContext('2d');
cx.strokeStyle = 'rgb(255, 255, 0)';

cx.strokeRect(10, 10, 100, 100);
cx.setTransform(1.5, 0.5, -0.5, 1.5, 50, 50);
cx.strokeRect(10, 10, 100, 100);
cx.setTransform(1.5, 0.5, -0.5, 1.5, 50, 50);
cx.strokeRect(10, 10, 100, 100);

描画パラメータの保存・復元

save()

　現在の描画パラメータを保存します。

save() : 描画パラメータの保存

restore()

　保存した描画パラメータの復元します。

restore() : 描画パラメータの復元

var cx = document.getElementById('jsccanvas').getContext('2d');

cx.strokeStyle = 'rgb(255, 255, 0)';
cx.strokeRect(10, 10, 100, 100);
cx.save();
cx.strokeStyle = 'rgb(0, 255, 255)';
cx.setTransform(1.5, 0.5, -0.5, 1.5, 50, 50);
cx.strokeRect(10, 10, 100, 100);
cx.restore();
cx.strokeRect(20, 20, 100, 100);

合成

globalCompositeOperation

　図形や画像の合成方法を設定します。

globalCompositeOperation = value : 図形や画像の合成方法設定

source-atop : 現在のイメージ領域に描画、重なった部分は新規イメージ
source-in : 重なったイメージ領域に描画、重なった部分は新規イメージ
source-out : 新規イメージ領域に描画、重なった部分は描画しない
source-over : 両方のイメージ領域に描画、重なった部分は新規イメージ(default)
destination-atop : 新規イメージ領域に描画、重なった部分は現在イメージ
destination-in : 重なったイメージ領域に描画、重なった部分は現在イメージ
destination-out : 現在のイメージ領域に描画、重なった部分は描画しない
destination-over : 両方のイメージ領域に描画、重なった部分は現在イメージ
lighter : 両方のイメージ領域に描画、重なった部分は混色
copy : 新規イメージ領域に描画、重なった部分は新規イメージ
xor : 両方のイメージ領域に描画、重なった部分は描画しない

var cx = document.getElementById('jsccanvas').getContext('2d');

cx.fillStyle = 'rgb(255, 255, 0)';
cx.fillRect(300, 100, 200, 200);
cx.fillStyle = 'rgb(0, 255, 255)';

//cx.globalCompositeOperation = 'source-atop';
//cx.globalCompositeOperation = 'source-in';
//cx.globalCompositeOperation = 'source-out';
cx.globalCompositeOperation = 'source-over';
//cx.globalCompositeOperation = 'destination-atop';
//cx.globalCompositeOperation = 'destination-in';
//cx.globalCompositeOperation = 'destination-out';
//cx.globalCompositeOperation = 'destination-over';
//cx.globalCompositeOperation = 'lighter';
//cx.globalCompositeOperation = 'copy';
//cx.globalCompositeOperation = 'xor';

cx.fillRect(400, 200, 200, 200);

フォーカス

drawFocusRing(element, x, y[, canDrawCustom])

　canvas のフォーカスされているところを示します。

drawFocusRing(element, x, y[, canDrawCustom]) : フォーカスの掲示

element : 要素
x : x 座標
y : y 座標
canDrawCustom : フラグ

Canvas メソッド

getContext(contextid)

　Canvas に描画するためのコンテキストを得ます。

getContext(contextid) : コンテキストの取得

contextid : "2d", "webgl", "experimental-webgl" など

toDataURL([type])

　Canvas の data:URL を返します。

toDataURL([type]) : data:URL の取得

type : "image/png", "image/jpeg", "image/svg+xml" など

var canvas = document.getElementById('jsccanvas');

var str = canvas.toDataURL();
console.log(str);

目次へ

二次元描画関数 - canvas(2D) context

インデックス

二次元描画 概要

長方形