简单例子-p3

模板已经有了,1. 画布,2. 画布对象,3. 获取到上下文

//1. 画布
<canvas width="800" height="600">你的浏览器太low了,请更新</canvas> 
<script>
    function draw(){
        if ($('canvas')[0].getContext) {
//3. 通过画布对象获取到上下文
            var ctx=$('canvas')[0].getContext('2d')
        }
    }
</script>

画矩形和矩形框学方法

• fillRect(x,y,w,h) 和 fillStyle='...' <- string
• strokeRect(x,y,w,h)和strokeStyle='....' <- string

    function draw(){
    // console.log($('canvas')[0]);
    var canvas=$('canvas')[0]
    if (canvas.getContext) {
        var ctx=canvas.getContext('2d');
        //可以理解为画笔需要拿到canvas上下文画笔
        ctx.fillStyle='rgb(200,0,0)'; //注意颜色样式必须放到上面,不然就画完了
        ctx.fillRect(10,10,350,300);
        
        ctx.fillStyle='rgba(0,0,200,0.5)';
        ctx.fillRect(30,30,350,300);
        
        ctx.strokeStyle='rgb(200,0,0)';
        ctx.strokeRect(10,340,200,150);
        
        ctx.strokeStyle='rgba(0,0,200,0.5)';
        ctx.strokeRect(30,360,200,150);
    }
}

图片.png

注意body上的onload="draw()"方法