HTML5 画布 火柴人实例及代码

目录

HTML5的画布：在页面中绘制图形的特殊区域

           1、H5中的画布标签

           2、获取画布

           3、获取画笔

           4、画直线

           5、线条的路径

           6、图形填充    

           7、绘制圆

---

HTML5的画布：在页面中绘制图形的特殊区域

    1、H5中的画布标签

       <canvas id="画布的名称" width="宽度" height="高度">
       
       </canvas>

       
    2、获取画布

       var cas = document.getElementById("画布的名称")

       
    3、获取画笔

   context对象，使用该对象可以在画布上绘制图形

    var ctx = cas.getContext('2d');

       
    4、画直线

    
      (1)确定初始位置(起始点)：moveTo(x,y)
      
      (2)确定连接端点(终点)：lineTo(x,y)
      
      (3)描边：stroke() --- 在起始点和终点之间画一条线
      
      (4)设置线宽：lineWidth
      
      (5)描边的颜色：strokeStyle='颜色'
      
      (6)线条端点的形状：lineCap=’属性值’
           
                     butt：无形状,方形的边缘 默认值
                     
                     round：圆形端点
                     
                     square：方形端点