詳細な仕様は以下のサイトで確認できます。
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;
}
//ｙ座標です。
this.randomY = function(){
return Math.random() * this.y;
}
}
思った以上に簡単に描画ができました！ ちなみに曲線の描画には
arc(始点x, 始点y, 半径, 始点の角度, 終点の角度, 回る方向)
四角形には
fillRect(始点x, 始点y, 終点x, 終点y)
を使います。もちろんcontext.はお忘れなく。
