詳細な仕様は以下のサイトで確認できます。
W3schools.com
まずは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 件のコメント:
コメントを投稿