html5--5-3 给直线添加样式

学习要点

• strokeStyle属性：设置颜色、渐变或模式（本节课只涉及到颜色）
• lineWidth属性：--设置线宽

---

Canvas的路径方法

1. moveTo() 定义绘制路径的起点(在直线中就是定义直线的起点)
2. lineTo() 添加一个新点，(在我们的直线案例中就是定义直线的终点，但是后边继续绘制的话，它就变成中间点)
3. stroke() 绘制已定义的路径

绘制直线段流程:

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  2  3  4 
      5  6  7  8  9 10 11 12 13     
     14     15     18 19 20     
     
      21         您的浏览器暂不支持HTML5的canvas元素！！22     
     23     43 44