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();
