canvas绘制矩形

canvas使用原点(0,0)在左上角的坐标系统,x坐标向右递增,y坐标向下递增。

我们可以使用绘图环境的矩形绘制函数来绘制矩形。

函数名 作用
fillRect(x,y,width,height) 绘制一个实心矩形
strokeRect(x,y,width,height) 绘制一个空心矩形
clearRect(x,y,width,height) 清楚指定的矩形区域,使之完全透明


我们创建了一个Html5 canvas标记

粘贴以下代码你可以看到如上效果

//实心矩形
//在点(200,10)处绘制一个宽和高均为100px的实心正方形
context.fillRect(200,10,100,100);
//在点(50,70)处绘制一个宽90px 高30px 的实心矩形
context.fillRect(50,70,90,30);

//空心矩形
//在点(110,10)处绘制一个宽和高均为50px的正方形边框
context.strokeRect(110,10,50,50);
//在点(30,10)处绘制一个宽和高均为50px的正方形边框
context.strokeRect(30,10,50,50);

//清除矩形区域
//清除点(210,20)处宽30px、高20px的矩形区域
context.clearRect(210,20,30,20);
//清除点(260,20)处宽30px、高20px的矩形区域
context.clearRect(260,20,30,20);