アトリエ・エクレア

2DCG&3DCG, プログラミング, 日記などを掲載してます。

Canvas

Canvas

  • Mozilla Developer Network   → リンク
  • Mozilla Developer Network (DOMリファレンス)   → リンク
  • JavaScriptリファレンス   → リンク

★ HTMLCanvasElementオブジェクト

HTMLElementオブジェクトのプロパティとメソッドを継承している。

HTML

<canvas id="canvas" width="450" height="300"></canvas>

JavaScript

var canvas = document.getElementById('canvas');  // HTMLCanvasElementオブジェクト取得
// または、var canvas = document.querySelector("#canvas"); ※但し、getElementById の方が速い

// HTMLCanvasElementオブジェクトのプロパティ
console.log(canvas.width);    // 450
console.log(canvas.height);   // 300

// HTMLCanvasElementオブジェクトのメソッド
var context = canvas.getContext('2d');   // CanvasRenderingContext2Dオブジェクト取得

★ コンテキストの取得

HTMLCanvasElement.getContext() で、canvasにおける描画コンテキストを取得できる。

var context;

window.addEventListener('load', initMyCanvas, false);  // EventTarget.addEventListener

function initMyCanvas(){
  var canvas = document.getElementById('canvas');      // HTMLCanvasElementオブジェクト取得
  context = canvas.getContext('2d');                   // CanvasRenderingContext2Dオブジェクト取得
  
  // または、context = document.getElementById('canvas').getContext('2d');
}

★ canvasの状態の、保存・復元

var context = document.getElementById('canvas').getContext('2d');

// 保存:
// スタックに現在の状態をpushすることで、キャンバスの全ての状態を保存する。
// CanvasRenderingContext2D.save()
context.save();     // この時点でのcanvas状態を保存

context.fillStyle = 'blue';
context.fillRect(20, 20, 200, 300);

// 復元:
// 描画状態のスタックのトップエントリをpopすることで、最新の保存されたcanvas状態を復元する。
// 保存された状態が無い場合、何もしない。
// CanvasRenderingContext2D.restore()
context.restore();  // 保存してあるcanvas状態を復元

★ 平行移動

CanvasRenderingContext2D.translate(x, y) ※x:水平方向, y:垂直方向 の移動距離
キャンバスの原点を、水平・垂直に平行移動する

var context = document.getElementById('canvas').getContext('2d');

// 水平方向に70px, 垂直方向に50px 平行移動する
context.translate(70, 50);
context.fillRect(0, 0, 200, 100);  // 最終的に、x:70, y:50, w:200, h:100 の塗り潰し矩形になる

// 変換行列をリセット
// Horizontal scaling, Horizontal skewing, Vertical skewing,
//              Vertical scaling, Horizontal moving, Vertical moving
context.setTransform(1, 0, 0, 1, 0, 0);

★ 拡大・縮小

CanvasRenderingContext2D.scale(x, y) ※x:水平方向, y:垂直方向 のスケーリング係数
キャンバスの単位を、スケーリングする。※デフォルト: キャンバス上の1ユニットは、1ピクセル。
拡大縮小の中心点は、キャンバスの原点。
中心点を変更するには、translate()メソッドを使用する。

var context = document.getElementById('canvas').getContext('2d');
 
// 水平方に2倍, 垂直方向に5倍する
context.scale(2, 5);
context.fillRect(10, 20, 30, 40);   // 最終的に、x:20, y:100, w:60, h:200 の塗り潰し矩形になる
 
// 変換行列をリセット
// Horizontal scaling, Horizontal skewing, Vertical skewing,
//              Vertical scaling, Horizontal moving, Vertical moving
context.setTransform(1, 0, 0, 1, 0, 0);

var context = document.getElementById('canvas').getContext('2d');  
var img = document.getElementById('sampleImage');

// canvasの原点(左上)から、ソース画像の中心位置までの距離
var x = img.width / 2;
var y = img.height / 2;

context.save();
context.translate(x, y);     // 画像の中心に、canvasと原点を移動
context.scale(0.5, 0.5);     // キャンバスの単位を、水平・垂直方向に、それぞれ半分にスケーリング
context.translate(-x, -y);   // スケーリング後の座標で、canvasと原点を移動

// スケーリング後に移動を行ったcanvasの原点位置に、画像を描画
// 画像は結果的に、画像の中心を軸に、縦横それぞれ半分に縮小される
context.drawImage(img, 0, 0);   // ※drawImage()の引数でスケーリングする方法もある
context.restore();

★ 回転

CanvasRenderingContext2D.rotate(angle) ※angle:時計回りの回転角度(ラジアン)
変換行列に回転を加える。
回転の中心点は、キャンバスの原点。
中心点を変更するには、translate()メソッドを使用する。

var context = document.getElementById('canvas').getContext('2d');

// 時計周りに、45°回転させる    ※180°はπラジアン ←→ 1ラジアンは180°/π
context.rotate(45 * Math.PI / 180);  // degree * Math.PI / 180 
context.fillRect(50, 0, 100, 50);

// 変換行列をリセット
// Horizontal scaling, Horizontal skewing, Vertical skewing,
//              Vertical scaling, Horizontal moving, Vertical moving
context.setTransform(1, 0, 0, 1, 0, 0);

★ 画像

CanvasRenderingContext2D.drawImage()

image:HTMLImageElement・HTMLCanvasElement・HTMLVideoElement のいずれかのインスタンス
s:source, d:destination,
x:X座標, y:Y座標, w:幅, h:高さ ※単位はピクセル

  • drawImage(image, dx, dy)                 ※デフォルト値 (sw:イメージ固有の幅, sh:イメージ固有の高さ)
  • drawImage(image, dx, dy, dw, dh)  ※デフォルト値 (sx:0, sy:0, sw:イメージ固有の幅, sh:イメージ固有の高さ)
  • drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh)

※HTML文書に、Img要素を置き、CSSで非表示にしておき、JavaScriptで制御する手もある。

var context = document.getElementById('canvas').getContext('2d');

window.onload = myFunc;

function myFunc() {  
  // HTMLImageElement
  var img = new Image(); // Image()コンストラクタ(Image Element constructor)で、HTMLImageElementを作成
  // または、 var img = document.createElement('img');
  
  // イベントハンドラ -------------------------------------------------------------------------------
  // 画像読み込み完了
  img.onload = function (e) {
    // 引数の指定方法は、他にもある
    context.drawImage(img, 0, 0); // image, canvasにおけるX座標(画像の左上), canvasにおけるY座標(画像の左上)
  };
  // または、 img.addEventListener('load', function(e){context.drawImage(img, 0, 0);}, false);
  
  // 画像読み込みエラー
  img.onerror = function (e) {
    window.alert('画像の読み込みエラー');
  };
  // または、 img.addEventListener('error', function(e){window.alert('画像の読み込みエラー');}, false);
  
  // 画像読み込み開始 -----------------------------------------------------------------------------------
  img.src = 'sample.png';
}

★ 矩形で消去 ※透明な黒で塗り潰す。

var context = document.getElementById('canvas').getContext('2d');
var x = 50, y = 0, width = 200, hight = 300;

// 塗り潰された矩形を描画する。
context.fillStyle = 'blue';
context.fillRect(x, y, width, hight);    // 始点のX座標, 始点のY座標, 幅, 高さ

// 矩形で、描画したものを消去。※透明な黒で塗り潰す。
// CanvasRenderingContext2D.clearRect()
context.clearRect(x, y, width, hight);   // 始点のX座標, 始点のY座標, 幅, 高さ

// キャンバス全体を消去する場合
// context.clearRect(0, 0, canvas.width, canvas.height);

★ 矩形 (線のみ)

var context = document.getElementById('canvas').getContext('2d');
var x = 50, y = 0, width = 200, hight = 300;

// 図形の周りの線に使用する色やスタイルを指定する。デフォルトは、#000 (black)
// CanvasRenderingContext2D.strokeStyle
context.strokeStyle = 'black';            // 設定の書き方は、他にもある

// 矩形を描画する。※塗り潰し無しの、線のみ
// CanvasRenderingContext2D.strokeRect()
context.strokeRect(x, y, width, hight);   // 始点のX座標, 始点のY座標, 幅, 高さ

★ 塗り潰し矩形

var context = document.getElementById('canvas').getContext('2d');
var x = 50, y = 0, width = 200, hight = 300;

// 図形の内側に使用する色やスタイルを指定する。デフォルトは、#000 (black)
// CanvasRenderingContext2D.fillStyle
context.fillStyle = 'rgba(255, 150, 200, 0.5)';   // 設定の書き方は、他にもある

// 塗りつぶされた矩形を描画する。
// CanvasRenderingContext2D.fillRect()
context.fillRect(x, y, width, hight);   // 始点のX座標, 始点のY座標, 幅, 高さ

★ 角丸長方形

以下、自作functionであり、一例にすぎない。

var context = document.getElementById('canvas').getContext('2d');

// 左上x座標, 左上y座標, 幅, 高さ, 角丸の半径, 線スタイル, 線の幅, 塗りつぶしするか(Boolean), 塗りつぶしスタイル
function drawRoundedRect(x, y, width, height, radius, myStrokeStyle, myLineWidth, isFill, myFillstyle){
    context.beginPath();
    context.moveTo(x + radius, y);
    context.lineTo(x + width - radius, y);
    context.quadraticCurveTo(x + width, y, x + width, y + radius);
    context.lineTo(x + width, y + height - radius);
    context.quadraticCurveTo(x + width, y + height, x + width - radius, y + height);
    context.lineTo(x + radius, y + height);
    context.quadraticCurveTo(x, y + height, x, y + height - radius);
    context.lineTo(x, y + radius);
    context.quadraticCurveTo(x, y, x + radius, y);
    context.closePath();
     
    // ストローク設定の前に行う ※重なり順が変わるため
    if (isFill){
        context.fillStyle = myFillstyle;
        context.fill();
    }
     
    // ストローク設定
    context.strokeStyle = myStrokeStyle;  // '#ff0000'など
    context.lineWidth = myLineWidth;
    context.stroke();
}

★ マウスクリックの座標

var canvas;                           // キャンバス
var context;                          // コンテキスト
var mouseClickPoint = {x:-1, y:-1};   // マウスクリックの座標

window.addEventListener('load', init, false);

function init(){
  canvas = document.getElementById('canvas');        // キャンバス HTMLCanvasElement
  context = canvas.getContext('2d');                 // コンテキスト CanvasRenderingContext2D
  
  canvas.addEventListener('click', canvasClick, false);
}

function canvasClick(e){   // 変数eには、MouseEventオブジェクトへの参照が代入される 
  // Event.target:  イベントを発生させたオブジェクトへの参照を返す。  ※この例では、HTMLCanvasElementオブジェクトを返す
  // ※MouseEventオブジェクトは、UIEventオブジェクトとEventオブジェクトのプロパティとメソッドを継承する
  
  // Element.getBoundingClientRect():  要素のサイズと、viewportに対する相対位置を持つ、DOMRectオブジェクトを返す
  // HTMLCanvasElementは、(Elementオブジェクトのプロパティとメソッドを継承した)HTMLElementオブジェクトのプロパティとメソッドを継承する
  
  // ※DOMRectオブジェクトは、以下のようなプロパティを持つ
  //   → x(※DOMRectの原点の水平座標), y(※DOMRectの原点の垂直座標), left, top, right, bottom, width, height
  var rect = e.target.getBoundingClientRect();
  
  // MouseEvent.clientX  イベント発生のクライアント領域での、水平座標
  // MouseEvent.clientY  イベント発生のクライアント領域での、垂直座標
  mouseClickPoint.x = e.clientX - rect.left;     // rect.left → rect.x でも可
  mouseClickPoint.y = e.clientY - rect.top;      // rect.top → rect.y でも可

  document.write('<p>マウスクリックの水平座標:' + mouseClickPoint.x + '</p>');
  document.write('<p>マウスクリックの垂直座標:' + mouseClickPoint.y + '</p>');
}

 

コメントの投稿

非公開コメント

マイブログへようこそ♪
PLEASANT_DRAGON

2DCG&3DCG,プログラミング,
日記などを掲載中☆

(*´▽`*)コメント大歓迎です☆

最新記事
記事一覧

全ての記事を表示する

カテゴリ
SAI (0)
mi (2)
C (1)
C++ (1)
C# (0)
VBA (0)
月別アーカイブ
最新コメント
RSSリンクの表示
リンク
FC2ブログランキング

FC2Blog Ranking

ピックアップ商品1♪










カレンダー
08 | 2017/09 | 10
- - - - - 1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
ブログ内検索フォーム
プロフィール

エクレア

Author:エクレア


  • 2DCG&3DCGの創作活動をしています。

  • SF系のメカが大好物。

アクセスカウンター
Twitter
ピックアップ商品2♪