要求就是画一个矩形,可以嵌套,这里用清除方法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>
网友评论