HTML5的绘图步骤——示例绘制火柴人

目录

HTML5的绘图步骤

1、创建画布

2、获取画布

3、获取画笔

4、绘制图形

绘制火柴人

1、源代码

 2、运行效果

HTML5的绘图步骤

1、创建画布

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

2、获取画布

      var canvas = document.getElementById('画布名称')

3、获取画笔

      var context = canvas.getContext('2d')

4、绘制图形

     (1)绘制直线：
         A、设置起始点：context.moveTo(x,y)
               设置线条的宽度：context.lineWidth = '宽度'
               设置端点的形状：context.lineCap = '属性值'    取值有：butt(默认值)、round(圆形)、square(方形)
         B、设置端点：context.lineTo(x,y)
              设置线条的样式：context.strokeStyle='颜色值'
         C、描边：context.stroke( )

      注：在绘制图形时要注意逻辑顺序。eg：若是图形已经描边context.stroke( )，这时在其后设置线条的样式：context.strokeStyle='颜色值'，线条的颜色不会发生任何改变。因为计算机运行代码从前往后，这时描边已经完成，无法再加颜色。

eg：绘制一条红色的线段

        //1、获取画布
        var canvas = document.getElementById('cans')

        //2、准备画笔
        var context = canvas.getContext('2d')

        //3、设置起点
        context.moveTo(20,100)

        //4、设置线