HTMLでCanvasを作成し、CSSでスタイルを設定し、JavaScriptでCanvas上に図形を描画しています。ブラウザでこのHTMLファイルを開くと、指定した図形がCanvas上に描画されます。
目次
HTML (index.html):
この部分はHTMLの基本的な構造を持っています。ウェブページのタイトルを設定しています。
外部のスタイルシートファイル style.css を読み込んでいます。
<canvas> 要素を作成して、id 属性を “myCanvas” に設定し、幅と高さをそれぞれ 300 ピクセルと 250 ピクセルに設定しています。
<script> 要素を使用して、JavaScript ファイル script.js を読み込んでいます。このスクリプトは、Canvas上に図形を描画するためのものです。
CSS (style.css):
#myCanvas セレクタに対して、 display プロパティを block に設定しています。これはCanvas要素をブロックレベル要素として表示するためです。
margin プロパティを 0 auto に設定して、Canvasを水平方向に中央寄せにします。
JavaScript (script.js):
JavaScript ファイルは、<canvas> 要素を取得し、その上で描画を行います。
getContext("2d") メソッドを使用して、2D描画コンテキストを取得します。
まず、青い四角形、赤い円、緑の線を描画しています。四角形、円、線それぞれの描画に対して、色、位置、サイズなどを設定しています。
コード
<!DOCTYPE html>
<html>
<head>
<title>Canvas</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<canvas id="myCanvas" width="300" height="250"></canvas>
<script src="script.js"></script>
</body>
</html>
#myCanvas {
display: block;
margin: 0 auto;
}
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
// 四角形を描画
ctx.fillStyle = "blue";
ctx.fillRect(25, 25, 100, 100);
// 円を描画
ctx.beginPath();
ctx.arc(180, 150, 50, 0, 2 * Math.PI);
ctx.fillStyle = "red";
ctx.fill();
// 線を描画
ctx.moveTo(20, 220);
ctx.lineTo(280, 220);
ctx.strokeStyle = "green";
ctx.lineWidth = 5;
ctx.stroke();
