ブラウザで絵を描こう！～イチからザックリ！HTML5 Canvas！ ep2～

HTML5 Canvasで絵を描く！

HTML5 Canvasで絵を描く！

ブラウザ上で絵を描きながらHTML5 Canvasを学んできましょう！

前回の準備で書いたところまで、また書いてみましょう。

難しいことは置いといて、魅力的なHTMLの機能「Canvas」をイチからザックリと勉強していきましょう！HTML5 Canvasとは？Webページを構成するHTMLの機能一つで、HTMLとJavaScriptを用いて、絵や...


<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Canvas Ex1</title>
</head>
<body>
<div style="position: absolute; top: 50px; left: 50px;">
<canvas id="canvas" width="500" height="500">
Your browser does not support the HTML 5 Canvas. 
</canvas>
</div>
<script>
var theCanvas=document.getElementById("canvas");
var context=theCanvas.getContext("2d");
    
function drawScreen(){
    //ここに図形を描く命令を描く
};
    
drawScreen();
</script>
</body>
</html>

背景を描く

背景を描いていきましょう。芝生と空を描きます。

芝生

drawScreen()に以下の命令を加えてみましょう。


context.fillStyle="green";
context.fillRect(0,300,500,200);

長方形(fillRect)

これは前回やった長方形を描く命令です。画面下側に緑の単色の長方形が描かれました。

塗りつぶす色を指定: context.fillStyle=" 色 ";
色の指定のついては、「”black”」「”red”」「”green”」などCSSで規定されている色の名前を指定する他に、「”rgb(赤, 緑, 青)”」の24ビットのRGB値での指定や、「#ff0000」のように１６進数での指定も可能です。
単色塗り長方形の位置大きさの指定: context.fillRect(図形左上のx座標, 図形左上のy座標, 図形の幅, 図形の高さ);

空

drawScreen()に以下の命令を加えてみましょう。


var gr=context.createLinearGradient(0,0,0,300);
gr.addColorStop(0,"rgb(100,200,255)");　//水色
gr.addColorStop(1,"rgb(255,255,255)");　//白
context.fillStyle=gr;
context.fillRect(0,0,500,300);

グラデーション(createLinearGradient)

ここでは長方形の色にグラデーションを適用する命令を用いています。

グラデーションの範囲の指定: context.createLinearGradient(グラデーションの開始点のx座標, y座標, グラデーションの終了点のx座標, y座標)
上下の方向にグラデーションが伸びでいるので、今回は(0,0)から(0,300)でx座標を合わせています。
カラーストップの指定: addColorStop(グラデーション開始と終了の相対位置, その位置に適用したい色);
グラデーションの開始地点を0として、終了地点を1とした相対位置と、その位置に適用したい色を指定します。

var gr=context.createLinearGradient(0,0,0,300);で変数grにグラデーションを格納して、fillStyleでこのgrを指定することで、グラデーションの長方形が描画されます。

家を描く

次に家を描きます。壁、屋根、窓をそれぞれ描いていきます。

壁

drawScreen()に以下の命令を加えてみましょう。


context.strokeStyle="black"
context.lineWidth=2;
context.fillStyle="rgb(255,80,0)";　//オレンジ
context.fillRect(200,200,200,200);
context.strokeRect(200,200,200,200);

長方形(fillRect, strokeRect)

今回は単色塗りに加え、縁取りもしているので、これも前回やった輪郭を描く命令のstrokeRect()を使っています。背景の上に縁が黒くとられたオレンジの長方形が描画されたはずです。

輪郭の色を指定: context.strokeStyle=" 色 ";
長方形の輪郭の位置大きさの指定: context.strokeRect(図形左上のx座標, 図形左上のy座標, 図形の幅, 図形の高さ);

屋根

drawScreen()に以下の命令を加えてみましょう。


context.beginPath();
context.moveTo(150,200);
context.lineTo(450,200);
context.lineTo(300,100);
context.lineTo(150,200);
context.fillStyle="rgb(255,50,100)"; //うす赤
context.fill();
context.stroke();

パスで描く(beginPath, moveTo, lineTo, fill, stroke)

次はパスの機能を使って、屋根を描いていきましょう。パスは線分を引いたり、結んだりして図形を描きます。

パスの描き始めの合図

context.beginPath();

この命令でパスの機能を使うという合図をします。

描き始めの位置を指定

context.moveTo(描き始めのx座標, y座標);

この命令でパスの描き始めの位置を指定します。

次に線分を引きたい位置の指定

context.lineTo(次に線分を引きたい位置のx座標, y座標);

この命令で次に線分を描きたい座標を指定します。この命令を座標を変えて繰り返し実行することで図形を描くことができます。

今回は屋根の左下(150,200)、屋根の右下(450,200)、屋根のてっぺん(300,100)へ線分を走らせ、最後にスタート地点の屋根の左下(150,200)に戻ってくるようになっています。

閉じたパス内に色を塗る

context.fill();

この命令で閉じたパス内に色を塗りつぶします。このとき、fillStyleで指定されている色が適用されます。パスが閉じていない場合は端と端を結んで色を塗りつぶします。

パスに色をつける

context.stroke();

この命令でbeginPath()から指定してきたパスに色をつけます。このとき、strokeStyleで指定されている色が適用されます。

窓

drawScreen()に以下の命令を加えてみましょう。


context.beginPath();
context.linewidth=5;
context.arc(300,270,50,(Math.PI/180)*0,(Math.PI/180)*360,false);
context.fillStyle="rgb(100,200,255)";
context.fill();
context.stroke();
context.beginPath();
context.moveTo(250,270);
context.lineTo(350,270);
context.stroke();
context.beginPath();
context.moveTo(300,220);
context.lineTo(300,320);
context.stroke();

円(beginPath, arc, fill, stroke)

最後に円のパスを描くarc()を使って窓を描きましょう。

円のパスを描く

context.arc(円の中心のx座標, y座標, 半径, 円弧の開始の角度(rad), 終了の角度(rad), 反時計回りか時計回りか);

この命令で円のパスを指定することができます。

円の開始の角度と終了の角度は単位はラジアン(rad)で指定するので、(Math.PI/180)*角度(deg)で角度(deg)をラジアン(rad)に変換してます。今回は正円で0度から360度なので、(Math.PI/180)*0と(Math.PI/180)*360で表されます。

最後のパラメータの反時計回りか時計回りかは、反時計回りだったらtrue、時計回りだったらfalseを入力します。

パスで描く(beginPath, moveTo, lineTo, stroke)

パスで窓の格子を描きます。横の線分（(250,270)から(350,270)）と縦の線分（(300,220)から(300,320)）をそれぞれ描いています。

まとめ

最後にまとめで今回の全コードと扱ったメソッド（命令）をまとめておきます。

今回の全コード

CanvasEx2.html


<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Canvas Ex2</title>
</head>
<body>
<div style="position: absolute; top: 50px; left: 50px;">
<canvas id="canvas" width="500" height="500">
Your browser does not support the HTML 5 Canvas. 
</canvas>
</div>
<script>
var theCanvas=document.getElementById("canvas");
var context=theCanvas.getContext("2d");
    
function drawScreen(){
    //ここに図形を描く命令を描く
    
    //芝生
    context.fillStyle="green";
    context.fillRect(0,300,500,200);
    
    //空
    var gr=context.createLinearGradient(0,0,0,300);
    gr.addColorStop(0,"rgb(100,200,255)");　//水色
    gr.addColorStop(1,"rgb(255,255,255)");　//白
    context.fillStyle=gr;
    context.fillRect(0,0,500,300);
    
    //壁
    context.strokeStyle="black"
    context.lineWidth=2;
    context.fillStyle="rgb(255,80,0)";　//オレンジ
    context.fillRect(200,200,200,200);
    context.strokeRect(200,200,200,200);
    
    //屋根
    context.beginPath();
    context.moveTo(150,200);
    context.lineTo(450,200);
    context.lineTo(300,100);
    context.lineTo(150,200);
    context.fillStyle="rgb(255,50,100)";　//うす赤
    context.fill();
    context.stroke();
    
    //窓
    context.beginPath();
    context.linewidth=5;
    context.arc(300,270,50,(Math.PI/180)*0,(Math.PI/180)*360,false);
    context.fillStyle="rgb(100,200,255)";　//水色
    context.fill();
    context.stroke();
    context.beginPath();
    context.moveTo(250,270);
    context.lineTo(350,270);
    context.stroke();
    context.beginPath();
    context.moveTo(300,220);
    context.lineTo(300,320);
    context.stroke();
};
    
drawScreen();
</script>
</body>
</html>

扱ったメソッドまとめ

塗りつぶす色を指定: context.fillStyle=" 色 ";
単色塗り長方形の位置大きさの指定: context.fillRect(図形左上のx座標, 図形左上のy座標, 図形の幅, 図形の高さ);
輪郭の色を指定: context.strokeStyle=" 色 ";
長方形の輪郭の位置大きさの指定: context.strokeRect(図形左上のx座標, 図形左上のy座標, 図形の幅, 図形の高さ);

グラデーションの範囲の指定: context.createLinearGradient(グラデーションの開始点のx座標, y座標, グラデーションの終了点のx座標, y座標);
カラーストップの指定: addColorStop(グラデーション開始と終了の相対位置, その位置に適用したい色);

パスの描き始めの合図: context.beginPath();
描き始めの位置を指定: context.moveTo(描き始めのx座標, y座標);
次に線分を引きたい位置の指定: context.lineTo(次に線分を引きたい位置のx座標, y座標);
閉じたパス内に色を塗る: context.fill();
パスに色をつける: context.stroke();