Canvas＆Processing
～ ウェブの最新技術が魅せる「Firefoxの灯」（2）

いろいろな形をいろいろな色で描こう

　さらに、線や円、自由曲線などをさまざまな色や透明度を変えながら描いてみます（HTMLはJavaScriptの読み込み先をcanvas_3.jsに変更しただけなので割愛します）。

JavaScript: canvas_3.js

$(document).ready(function(){
    //main_canvas を取得
    var canvas = $("#main_canvas");
    //2Dの描画コンテキストを取得
    var context = canvas[0].getContext("2d");

    //線を描く xy(200, 50)とxy(200, 350)に、幅5の黒色の線を引く
    context.lineWidth = 5;
    context.strokeStyle = "black";
    context.beginPath();
    context.moveTo(200, 50);
    context.lineTo(200, 350);
    context.stroke();

    //三角を描く 縁の幅が4で黒色、塗りつぶしが白色の三角形を描く
    context.lineWidth = 4;
    context.strokeStyle = "#000000";//黒
    context.fillStyle = "#ffffff";//白
    context.beginPath();
    context.moveTo(200, 50);
    context.lineTo(150, 150);
    context.lineTo(250, 150);
    context.lineTo(200, 50);
    context.fill();//塗りつぶし
    context.stroke();//ストローク

    //円を描く
    context.fillStyle = "rgba(0, 0 , 255, 0.8)";//青で、透明度0.8
    context.beginPath();
    context.arc(200, 200, 50, 50, Math.PI*2,true);
    context.fill();//塗りつぶし
    context.stroke();//ストローク

    //x=150, y=250 の座標に 100x50 のサイズで矩形を描く
    context.fillStyle = "red";
    context.fillRect(150, 250, 100, 50);
    context.strokeRect(150, 250, 100, 50);
});

上記ソースコードを実装したサンプル

　この例では、コード順に、縦線、白い三角形、半透明な青色の円、赤い矩形を描いています。色はredのようなキーワードの他に#ffffffのような16進トリプレット表記、rgba(0, 0, 255, 0.8)のように指定できます。

文字を描こう

　Canvasにも文字列を描くことができます（HTMLはJavaScriptの読み込み先をcanvas_4.jsに変更しただけなので割愛します）。

JavaScript: canvas_4.js

$(document).ready(function(){
    //main_canvas を取得
    var canvas = $("#main_canvas");
    //2Dの描画コンテキストを取得
    var context = canvas[0].getContext("2d");

    //中略・・・

    //フォントを "32px Arial"にし、白で塗りつぶし青で縁取った文字列を描く
    context.font = "32px Arial";
    context.lineWidth = 1;
    context.fillStyle = "white";
    context.strokeStyle = "blue";
    context.fillText("HELLO CANVAS", 72, 100);
    context.strokeText("HELLO CANVAS", 72, 100);
});

上記ソースコードを実装したサンプル

　文字列は、fillTextおよびstrokeTextの2つのメソッドで描くことができます。fillは塗りつぶしを、strokeは縁のみを描画します。それぞれの色や透明度の指定は、これまでと同様fillStyleおよびstrokeStyleで指定します。フォントはfont属性で指定します。このサンプルでは文字の大きさは20px、フォントはArialと指定しています。

イメージを描こう

　また、外部のイメージファイルを読み込んで描画することもできます（HTMLはJavaScriptの読み込み先をcanvas_5.jsに変更しただけなので割愛します）。

JavaScript: canvas_5.js

$(document).ready(function(){
    //main_canvas を取得
    var canvas = $("#main_canvas");
    //2Dの描画コンテキストを取得
    var context = canvas[0].getContext("2d");

    //中略・・・

    //イメージを読み込んで貼り付け。
    var img = new Image(); 
        img.onload = function() {
          //イメージが読み込まれたら描画する
            context.drawImage(img, 200, 200);
        }
        img.src = 'dino.png';
});

上記ソースコードを実装したサンプル

　このようにCanvasにはさまざまな形や文字、イメージなどを描くことが可能となっています。ただし、ここで挙げた例は、Canvasでできることの一部に過ぎません。Canvasの使い方をより詳しく知りたい方は、Mozilla Developer Network : Canvasを参照ください。