canvas基礎-1

html部分

<canvas id="canvas">
     沒有出現圖形，說明您的瀏覽器不支持 HTML5 canvas 標籤。
</canvas>

css部分

canvas {
            width: 200px;
            height: 100px;
            display: block;
            margin: 10px auto;
        }

js部分

window.onload = function (params) {
    // 得到繪製源
    var c = document.getElementById('canvas');
    // 創建畫布，建立二維視角
    var ctx = c.getContext('2d');
    // 填充樣式
    ctx.fillStyle = '#ff0000';
    // fillRect(x,y,width,height)繪製矩形，提供四個參數，座標以及寬高
    ctx.fillRect(0,0,150,75);
}