canvasタグの使い方

2024年7月1日

canvasタグはJavaScriptで操作します。

<body onload="draw();">
    <canvas id="canvas" width="xxx" height="xxx"></canvas>
</body>

function draw() {
    let canvas = document.querySelector("#canvas");
    if (canvas.getContext) {
        let ctx = canvas.getContext("2d");

        // 描画
    }
}

ctx.fillRect(x, y, width, height); // 矩形塗りつぶし
ctx.strokeRect(x, y, width, height); // 矩形輪郭
ctx.clearRect(x, y, width, height); // 矩形削除

beginPath()→新規パス作成
パスメソッドでパス描画
closePath()→パスを閉じる
stroke()→パスの輪郭をなぞる
fill()→パスを塗りつぶす

function draw() {
    let canvas = document.querySelector("#canvas");
    if (canvas.getContext) {
        let ctx = canvas.getContext("2d");

        // 描画
        beginPath();
        moveTo(75, 50); // ペンを移動
        lineTo(100, 75); // パスを描画
        lineTo(100, 25);  // パスを描画
        fill();  // パスを閉じて、塗りつぶし
    }
}

arc(x, y, radius, startAngle, endAngle, counterclockwise);
arcTo(x1, y1, x2, y2, radius);
quadraticCurveTo(cp1x, cp1y, x, y); // 2次ベジェ曲線
bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y); // 3次ベジェ曲線

Path2D
SVGパス

canvasタグの使い方

関連記事