SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

ウェブの最新技術が魅せる「Firefoxの灯」

Canvas&Processing
~ ウェブの最新技術が魅せる「Firefoxの灯」(2)


  • X ポスト
  • このエントリーをはてなブックマークに追加

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

 さらに、線や円、自由曲線などをさまざまな色や透明度を変えながら描いてみます(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を参照ください。

次のページ
Processing.jsを試す

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
ウェブの最新技術が魅せる「Firefoxの灯」連載記事一覧

もっと読む

この記事の著者

赤塚 大典(アカツカ ダイスケ)

1976年東京生まれ。都立航空工業高等専門学校を卒業後、4輪レーサーを目指すも断念。蕎麦屋、溶接屋を経てプログラマになる。プログラマとしては、京阪奈地区の研究所に7年従事し、その間、2003年IPA未踏ユース、2006年IPA未踏ソフトウェア創造事業に採択される。未踏において、Firefoxの拡張機...

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

Mozilla Japan(Mozilla Japan)

一般社団法人 Mozilla Japanhttp://mozilla.jp/

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/6121 2011/09/06 13:16

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング