【Canvas】Ver2 ～ 三角形描画 ～

直線の描画を利用した三角形の集合体描画

canvas の 直線を描画するための関数を使用して、 三角形の集合体を描画してみた

HTML

JavaScript

$(document).ready(function () {

    // キャンバスの準備
    // 記事ごとに個別の ID を設定する
    var canvas = document.getElementById('canvas2');
    if (canvas.getContext) {
        // ２次元の描画コンテクストを取得
        var ctx = canvas.getContext('2d');

        // 座標の指定
        var startLeft = 50;
        var StartTop = 300;
        var EndTop = 350;
        // 大きい正三角形を描画する
        for (downCount = 0; downCount <= 5; downCount++) {
            // 座標の補正
            var correctionLeft = 25 * downCount;
            var correctionTop = 50 * downCount;
            // 白抜き三角形描画
            for (idx = 1; idx <= 6 - downCount; idx++) {
                ctx.beginPath();
                ctx.moveTo(startLeft * idx + correctionLeft, EndTop - correctionTop);
                ctx.lineTo(startLeft * (0.5 + idx) + correctionLeft, StartTop - correctionTop);
                ctx.lineTo(startLeft * (1 + idx) + correctionLeft, EndTop - correctionTop);
                ctx.closePath();
                ctx.strokeStyle = "#000080";
                ctx.stroke();
            }

            // 黒塗り三角形描画
            for (idx = 1; idx <= 5 - downCount; idx++) {
                ctx.beginPath();
                ctx.moveTo(startLeft * (0.5 + idx) + correctionLeft, StartTop - correctionTop);
                ctx.lineTo(startLeft * (1.5 + idx) + correctionLeft, StartTop - correctionTop);
                ctx.lineTo(startLeft * (1 + idx) + correctionLeft, EndTop - correctionTop);
                ctx.closePath();
                ctx.fillStyle = "#000080";
                ctx.fill();
            }
        }
    }
});