2014年10月31日金曜日

Canvasによる単純な図形の描画

HTML5とJavaScriptを連携させることで、簡単に描画することの出来る機能Canvasについて、メモを残しておきます。

詳細な仕様は以下のサイトで確認できます。
W3schools.com

drawing
まずはHTMLです。わかりやすいように、canvasの枠線だけ指定しています。
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>drawing</title>
    <style>
    canvas{
     border: solid;
    }
    </style>
  </head>
  <body onload="draw();">
      <canvas id="paint" width="400" height="300"></canvas>
      <script src="/myscript.js"></script>
  </body>
</html>

HTMLは非常にシンプルです。
①canvasタグにidとcanvasのサイズを指定する。

②bodyタグ内にonload=draw();と記載しておく。

このメソッド名は任意のもので構いません。要はJavaScriptと整合性が取れていれば良いというわけです。


やったこと

今回は、canvas内にランダムに複数の三角形を書き込む処理を書いてみました! 実際の例は本文の最後に乗せておきます。

以下、JavaScriptのコードになります。ちょっと長いですが、コメントの通りのことしかやっておりませんので、それほどややこしくはないです!

myscript.js
//これがHTMLから呼び出されるメソッドです
function draw(){
    //canvasに設定したidを元に、canvasのオブジェクトを生成します。
    var canvas = document.getElementById('paint');
    //古いブラウザーではcanvasが実装されていないため、チェックしておきます。
    if (canvas.getContext){
      //今のところ2Dしか実装されていませんが、contextを作成します。
      //描画に関する設定はこのオブジェクトを使用して指定します。
      var ctx= canvas.getContext('2d');
      //ちょっと長くなるので、paintメソッドを定義しました。
      paint(context);
    }
}

function paint(ctx){
    //Pointクラスはcanvas内のランダムな座標を取得するために定義しました。
    point = new Point(400, 300);
    //70回くらい図形を描きます。
    for(i = 0; i < 70; i++){
        //opacityです。0.0-1.0で指定するため、以下の関数で上手くいきます。
        ctx.globalAlpha = Math.random();
        //描画の開始を宣言します。
        ctx.beginPath();
        //このメソッドは図形の色をランダム指定するために定義しました。
        //線に色を付けたい場合は、strokeStyleに色を指定します。
        ctx.fillStyle = randomColor();
        //開始地点の座標です。座標はcanvasの左上から計算します。
        ctx.moveTo(point.randomX(), point.randomY());
        //二つ目の座標です。
        ctx.lineTo(point.randomX(), point.randomY());
        //三つ目の座標です。三角形ができました。
        ctx.lineTo(point.randomX(), point.randomY());
        //描画します。
        //線の場合はstroke()メソッドを使います。
        ctx.fill();
    }

//ランダムに色を取得するためのメソッドです。
function randomColor(){
    var r = Math.floor(Math.random() * 256);
    var g = Math.floor(Math.random() * 256);
    var b = Math.floor(Math.random() * 256);
    return 'rgb(' + r + ',' + g + ',' + b + ')';
}

//クラスっぽく作りました。
function Point(canvas_width, canvas_height){
    //キャンバスのサイズを取得しておきます。
    this.x = canvas_width;
    this.y = canvas_height;

    //x座標です。
    this.randomX = function (){
      return Math.random() * this.x;
    }
    //y座標です。
    this.randomY = function(){
      return Math.random() * this.y;
    }
}

思った以上に簡単に描画ができました! ちなみに曲線の描画には

arc(始点x, 始点y, 半径, 始点の角度, 終点の角度, 回る方向)

四角形には

fillRect(始点x, 始点y, 終点x, 終点y)

を使います。もちろんcontext.はお忘れなく。

0 件のコメント:

コメントを投稿