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);
}