【Canvas】Ver1 ～ 矩形描画 ～

canvas を使用した矩形描画

canvas の 矩形を描画するための関数を使用して、
矩形を描画してみた

HTML

JavaScript

$(document).ready(function(){
    // キャンバスの準備
    // 記事ごとに個別の ID を設定する
    var canvas = document.getElementById('canvas1');
    if (canvas.getContext) {
        // ２次元の描画コンテクストを取得
        var ctx = canvas.getContext('2d');
        // 塗り潰し矩形の描画
        ctx.fillRect(50, 50, 300, 200);
        // 矩形の輪郭を描画
        ctx.clearRect(100, 100, 200, 100);
        // 指定領域を消去し、完全に透明化する
        ctx.strokeRect(150, 125, 100, 50);
    }
});