html5--5-5 绘制填充矩形

 

学习要点

• 掌握绘制矩形的方法：strkeRect()/fillRect()
• 掌握绘制路径的 beginPath()和closePath()

---

矩形的绘制方法

1. rect(x,y,w,h)创建一个矩形
2. strokeRect(x,y,w,hx,y,w,h) 绘制矩形（无填充）
3. fillRect(x,y,w,h) 绘制"被填充"的矩形
4. stroke() 绘制已定义的路径
5. fill()绘制一个实心的（带填充的图形）

Canvas的路径方法

1. moveTo() 定义绘制路径的起点(在直线中就是定义直线的起点)
2. lineTo() 添加一个新点，(在我们的直线案例中就是定义直线的终点，但是后边继续绘制的话，它就变成中间点)
3. stroke() 绘制已定义的路径
4. fill()绘制一个实心的（带填充的图形）
5. beginPath() 用来创建新的路径
6. closePath() 从当前点回到起始点的来封闭路径

绘制直线段流程:

1. 在HTML5文档中添加canvas元素，并且设置的宽高和ID
2. 在canvas元素中添加提示语句，让不支持canvas的浏览器能够显示友好的提示语句
3. 添加script元素
4. 获取画布/设置绘图绘图环境：此为固定语句，暂时记住、了解即可，后续课程还会继续讲解
   1. 指定线宽:lineWidth= 数值
   2. 指定颜色：strokeStyle=颜色值（只适用用轮廓，线段等，填充色用：fillStyle=颜色值
5. 设定起点：moveTo(x坐标,y坐标)
6. 设定终点：lineTo(x坐标,y坐标)
7. 开始绘制：stroke()

绘制矩形流程：

1. 在HTML5文档中添加canvas元素，并且设置的宽高和ID
2. 在canvas元素中添加提示语句，让不支持canvas的浏览器能够显示友好的提示语句
3. 添加script元素
4. 获取画布/设置绘图绘图环境：此为固定语句，暂时记住、了解即可，后续课程还会继续讲解

• 绘制空心矩形

1. 指定线宽:lineWidth= 数值
2. 指定轮廓颜色：strokeStyle=颜色值（只适用用轮廓，线段等，填充色用：fillStyle=颜色值
3. 设定矩形的基本参数：strokeRect(x,y;width,height)

绘制填充矩形

1. 指定填充颜色：fillStyle=颜色值（只适用用轮廓，线段等，填充色用：fillStyle=颜色值
2. 设定矩形的基本参数：fillRect(x,y;width,height)

 

 

实例

 

1  2  3  4 
       5  6  7  8  9 10 11 12 13     
      14     15     18 19 20     
      
       21         您的浏览器暂不支持HTML5的canvas元素！！22     
      23     61 62