如何使用HTML5的Canvas图形元素绘制图形

1、canvas绘制矩形

    
    
    
    
        body {
            margin: 0;
            padding: 0;
        }
    

js:

/**
 * Created by winson on 2016/9/11.
 */
function draw(id) {
    var canvas = document.getElementById(id);//用getElementById获取到canvas对象
    var context = canvas.getContext('2d');//取得上下文
    context.fillStyle = "green";//绘制背景的颜色
    context.strokeStyle = "#fff";//绘制边框的颜色
    context.lineWidth = 5; //设置画笔宽度
    context.fillRect(0, 0, 400, 300);//绘制
    context.strokeRect(50, 50, 180, 120);
}