小中学生向けプログラミング講座　師匠のブログ: Canvasで絵を書こう

HTMLのCanvasという機能とJavaScriptで絵を描くことができます。HTMLで描くためのcanvasタグでキャンバスのエリアを指定し、JavaScriptでcanvasタグのオブジェクトを取得して、コードを使って書くという手順です。今回は赤い四角を描いてみます。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Canvas</title>
</head>
<body>

<canvas id="canvas" width="400px" height="300px"></canvas>

</body>
</html>

はじめにHTMLのbodyタグの中にcanvasタグを追加します。この時、キャンバスの大きさをwidthとheightもしくはスタイルシートで指定しておきます。さらにJavaScriptでcanvasオブジェクトを取得できるようにidを付与しておきます。

それでは早速キャンパスに絵を描いてみます。

<script>
//キャンバスタグのオブジェクトを入れる変数
var canvas;
//お絵かきするためのオブジェクトを入れる変数
var ctx;

window.onload = function(){
    canvas = document.querySelector("#canvas");
    //描写を2D(平面)にして、お絵かき用のオブジェクトを取得
    ctx = canvas.getContext("2d");
};

</script>

HTML内にscriptタグを追加し、お絵かきするためのオブジェクトを取得して、ctx変数に入れます。この時、キャンバスオブジェクトにあるgeteContext関数で描写用のオブジェクトを取得しますが、getContext()の引数に平面の描写なら2d、立体の描写なら3dと入れてオブジェクトを取得します。描写用のオブジェクトが取得出来たら、早速、ctx内のオブジェクトで四角を書いてみましょう。

<script>
var canvas;
var ctx;

window.onload = function(){
    canvas = document.querySelector("#canvas");
    ctx = canvas.getContext("2d");
    
    //四角を描く
    draw();
};

//描写用の関数
function draw(){
    
    //今から描写用のコードを書きます宣言
    ctx.beginPath();
    
    //描写開始点の指定、左の数字がx軸で、右の数字がy軸
    ctx.moveTo(20, 20);
    
    //描写の点の指定
    ctx.lineTo(20, 40);
    ctx.lineTo(40, 40);
    ctx.lineTo(40, 20);
    ctx.lineTo(20, 20);
    
    //線の色を青にする
    ctx.strokeStyle = "blue";
    
    //ここではじめて指定したパスで描く
    ctx.stroke();
}
</script>

ctxに入っている描写用のオブジェクトで描く手順として、最初にbeginPath関数で今から描写するというコードを書き、moveTo関数で描写するポイントを指定します。引数の中にある数字は(x軸, y軸)を意味していて、