清除矩形-p4

作者: 增商 | 来源:发表于2020-01-04 00:38 被阅读0次

要求就是画一个矩形,可以嵌套,这里用清除方法clearRect()
类似一个矩形,中间镂空,加strokeRect()

效果实现.png

注意:只需要考虑宽高=100-(前近×2)

<body onload="draw()">
    <canvas width="800" height="600">你的浏览器太low了,请更新</canvas>
    <script>
        function draw(){
            // console.log($('canvas')[0]);
            var canvas=$('canvas')[0]
            if (canvas.getContext) {
                var ctx=canvas.getContext('2d');
                /**
                *绘制一个填充的矩形 fillRect(x,y,w,h)
                * 
                *绘制一个描边的矩形 strokeRect(x,y,w,h)
                *
                * 清除指定矩形区域
                * clearRect(x,y,w,h)
                * */
                ctx.fillRect(25,25,100,100);
                ctx.clearRect(45,45,60,60); //只需要考虑宽=100-(前近*2)
                ctx.strokeRect(50,50,50,50);//宽度有两面,高度同样有两面
            }
        }
    </script>