HTML5 Canvas

canvasの使い方についてのまとめです。

canvasとは

canvasはHTML5で新しく登場した、ブラウザ上で図を表現するためのタグです。 線や図を描いたり色を付けたりすることができますが、アニメーションとは違い図を動かすためには1コマずつ図の書き直しを繰り返す必要があります。  

・直線

直線の描き方は以下の流れで記述します。 コンテクストのリファレンスを取得 → canvas要素.getContext(“2d”) 現在のパスをリセット → beginPath() パスの始点を指定 → moveTo(x, y) パスの終点を指定して直線を引く → lineTo(x, y) 現在のパスの輪郭を表示 → stroke() html
<script>
window.onload = function () {
var line = document.getElementById("line");
var ctx = line.getContext("2d");
ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(200, 50);
ctx.stroke();
}
</script>

<body>
<canvas id="line" width="1000" height="1000"></canvas>
</body>
 

・ストロークと塗りつぶし

fill()を使用することで図形の塗りつぶしを描くことができます。 反対にstroke()を使用することで輪郭線だけの図形を描くことができます。  

・多角形

多角形の描き方は以下の流れで記述します。 コンテクストのリファレンスを取得 → canvas要素.getContext(“2d”) 現在のパスをリセット → beginPath() パスの始点を指定 → moveTo(x, y) パスの終点を指定して直線を引く → lineTo(x, y) パスの終点を指定して直線を引く → lineTo(x, y) パスを閉じる直線を引く → closePath() ※三角形ならlineto(x, y)を2つ、四角形なら3つ、五角形なら4つと増やしていくことで多角形を描くことができます。 html
<script>
window.onload = function () {
var line = document.getElementById("line");
var ctx = line.getContext("2d");
ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(200, 50);
ctx.lineTo(50, 200);
ctx.closePath();
ctx.stroke();
}
</script>

<body>
<canvas id="line" width="1000" height="1000"></canvas>
</body>
 

・長方形

多角形を描く方法でも長方形を描くことはできますが、矩形を描く場合fillRect(x, y, width, height)またはstrokeRect(x, y, width, height)を使用して記述することができます。 html
<script>
window.onload = function () {
var line = document.getElementById("line");
var ctx = line.getContext("2d");
ctx.fillRect(400,100,600,200);
}
</script>

<body>
<canvas id="line" width="1000" height="1000"></canvas>
</body>
fillRectは塗りつぶしで描かれ、strokeRectは枠線のみの矩形を描くことができます。  

・円、孤

円は、arc(x, y, radius, startAngle, endAngle, anticlockwise)を使用して描くことができます。 x座標、y座標、半径の大きさを指定し、startAngle, endAngleにはそれぞれ始まりを終わりの角度をラジアンで指定します。 anticlockwiseにはfalse(時計回り)、true(反時計回り)を指定します。 html
<script>
window.onload = function () {
var line = document.getElementById("line");
var ctx = line.getContext("2d");
ctx.beginPath();
ctx.arc(150,150,100,0,Math.PI*2,true);
ctx.stroke();
}
</script>

<body>
<canvas id="line" width="1000" height="1000"></canvas></body>
 

・テキスト

テキストは、fillText(text, x, y ,maxWidth)を使用して描くことができます。 html
<script>
window.onload = function () {
var line = document.getElementById("line");
var ctx = line.getContext("2d");
ctx.fillStyle="#096509";
ctx.font="20px";
ctx.fillText("テキスト", 100, 100, 500);}
</script>

<body>
<canvas id="line" width="1000" height="1000"></canvas>
</body>
 

・画像ファイル

画像ファイルは、drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh)を使用して描くことができます。 imageには、img,canvas,videoのうちいずれかの要素を記述します。 sx,syには、元イメージから使用する範囲を、sw,shにはその座標からの幅と高さを指定します。 dx,dyには、イメージを表示する座標を、dw,dhにはイメージの幅と高さを指定します。 画像ファイルは読み込みが遅いので読み込みと表示を別の関数に分けて記述する必要があります。 html
window.onload = function() {
var line = document.getElementById("line");
var ctx = line.getContext("2d");
var img = new Image();
img.src = "./test.jpg";

img.onload = function(){
ctx.drawImage(img, 100, 200,100,100);
}
}

</script>

</head>
<body>
<canvas id="line" width="1000" height="1000"></canvas>
</body>
 

・線の太さ、色

線の太さはlineWidth 、 線の色はstrokeStyleで指定することができます。 また、fillStyleで塗りつぶしやテキストの色を変えることができます。 html
<script>
window.onload = function () {
var line = document.getElementById("line");
var ctx = line.getContext("2d");
ctx.beginPath();
ctx.lineWidth = 10;
ctx.strokeStyle = "#446f6f"
ctx.strokeRect(400,100,600,200);
</script>
    
</head>
<body>
<canvas id="line" width="1000" height="1000"></canvas>
</body>
}
 

・回転

rotate(Angle)で図形を回転させることができます。 html
<script>
window.onload = function () {
var line = document.getElementById("line");
var ctx = line.getContext("2d");
ctx.beginPath();
ctx.rotate( 45 * Math.PI / 180 );
ctx.strokeRect(400,100,600,200);
</script>
    
</head>
<body>
<canvas id="line" width="1000" height="1000"></canvas>
</body>
}
 

・移動

translate(x,y)で図形を移動させることができます。 html
<script>
window.onload = function () {
var line = document.getElementById("line");
var ctx = line.getContext("2d");
ctx.beginPath();
ctx.translate(0, 500);
ctx.strokeRect(400,100,600,200);
</script>
    
</head>
<body>
<canvas id="line" width="1000" height="1000"></canvas>
</body>
}
 

・画面のクリア

clearRect(x, y, w, h)で指定した矩形を透明な色にすることができます。 html
<script>
window.onload = function () {
var line = document.getElementById("line");
var ctx = line.getContext("2d");
ctx.beginPath();
ctx.fillRect(400,100,600,200);
ctx.clearRect(450,150,500,100);
</script>
    
</head>
<body>
<canvas id="line" width="1000" height="1000"></canvas>
</body>
}
 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です