＜canvas＞要素で図形を描く
- HTMLで<canvas>要素を定義
- JavaScriptで<canvas>要素への参照を取得
- <canvas>要素の参照からコンテキストを取得
- コンテキストに色や線の太さなどを設定
- コンテキストに対して線や矩形などの描画を行う
HTML
<body onload="init()">
<canvas id="canvas"></canvas>
</body>
JS
function init(){
let canvas = document.getElementById("canvas");
let ctx = canvas.getContext("2d");
ctx.strokeStyle="#FF0000"; /*線や輪郭の色*/
ctx.fillStyle="#00FF00"; /*塗りつぶしの色*/
ctx.lineWidth=10; /*線の幅*/
ctx.lineCap ="round"; /*線の終端の形状で、butt、round、squareの値が使用可能*/
ctx.shadowColor = "#000000"; /*影の色*/
ctx.shadowBlur = 20; /*影に適用するぼかす範囲*/
/*線を引く*/
ctx.beginPath(); /*パスをクリアする*/
ctx.moveTo(10, 10); /*始点*/
ctx.lineTo(50, 110);/*終点*/
ctx.stroke(); /*線を描く*/
/*塗りつぶし四角を描く*/
ctx.fillRect(70, 10, 100, 100);
/*枠線の四角を描く*/
ctx.strokeRect(190, 10, 100, 100);
}
