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

HTML5的绘图步骤

1、创建画布

2、获取画布

HTML5的绘图步骤

1、创建画布

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、设置线条宽度
        context.lineWidth = '15'
        context.lineCap='round'   //设置端点的形状，butt（默认值，不带端点）、round(圆形)、square(方形)

        //5、设置端点
        context.lineTo(200,100)

        //6、设置线条颜色
        context.strokeStyle = 'red'

        //7、描边
        context.stroke()

代码运行效果图：

(2)重置路径：beginPath();在一张画布上绘制多个图形，要重新定义开始的路径。不重新定义，则下个图形的起始点默认与前一个图形的起始点相同，就会发生图形重叠。
(3)关闭路径：closePath();用于连接图形的起始点和端点，使绘制的图形成为封闭图形。
(4)路径填充：fill()；填充封闭图形内部的留白。

        var canvas = document.getElementById('cans')  //获取画布
        var context = canvas.getContext('2d')         //准备画笔

        context.moveTo(100,100)//设置起始点
        context.lineTo(100,200)//设置端点
        context.lineTo(200,200)//设置端点
        context.closePath()    //关闭路径

        context.fill()  //填充路径

代码运行效果图：

(5)绘制圆：arc(x,y,r,开始角,结束角,方向)；方向取值：true(逆时针)、false(顺时针)

        var canvas = document.getElementById('cans')
        var ctx = canvas.getContext('2d')

        ctx.beginPath()//重置路径
        ctx.arc(100,100,80,0,1.5*Math.PI,true)//表示逆时针画1/4圆。true表示逆时针，false表示顺时针
        //前俩值确定圆心位置，100,100。80表示圆的半径。0,1.5*Math.PI表示弧度，true表示逆时针

        ctx.stroke()

代码运行效果图1/4圆弧

绘制火柴人

1、源代码

<body>
    <canvas id="cans" width="1000px" height="1000px">
        您的浏览器不支持画布      <!--只有浏览器不能运行，才回显示出开始结束标签之间的内容-->
    </canvas>

    <script>
        var canvas = document.getElementById('cans')
        var ctx = canvas.getContext('2d')

        //绘制头部  
        ctx.lineWidth = '5'
        ctx.arc(500,100,38,0,2*Math.PI,false)
        ctx.stroke()



        //绘制躯干

          //绘制脖子
          ctx.beginPath()
          ctx.lineWidth = '10'
          ctx.moveTo(500,140)
          ctx.lineTo(500,160)
          ctx.stroke()

          //绘制身体
          ctx.beginPath()
          ctx.lineWidth = '30'
          ctx.moveTo(500,160)
          ctx.lineTo(500,290)
          ctx.stroke()

          //绘制文件夹
          ctx.beginPath()
          ctx.lineWidth = '2'
          ctx.fillStyle='red'
          ctx.moveTo(450,230)
          ctx.lineTo(450,280)
          ctx.lineTo(550,280)
          ctx.lineTo(550,230)
          ctx.fill()
          ctx.closePath()
          ctx.stroke()  //描边

          //绘制胳膊
          ctx.beginPath()
          ctx.lineWidth = '8'
          ctx.moveTo(510,165)
          ctx.lineTo(552,225)
          ctx.lineTo(500,270)
          ctx.stroke()

          //绘制手掌
          ctx.beginPath()
          ctx.lineWidth = '5'
          ctx.arc(500,270,10,0,2*Math.PI,false)
          ctx.fillStyle = 'black'
          ctx.fill()
          ctx.stroke()


          //绘制腿部

          //前腿
          ctx.beginPath()
          ctx.lineWidth = '10'
          ctx.moveTo(500,285)
          ctx.lineTo(480,450)
          ctx.stroke()

          //后腿
          ctx.beginPath()
          ctx.lineWidth = '10'
          ctx.moveTo(500,285)
          ctx.lineTo(520,450)
          ctx.stroke()


          //绘制脚部

          //前脚
          ctx.beginPath()
          ctx.lineWidth = '5'
          ctx.arc(466,450,15,1.0*Math.PI,2*Math.PI,false)
          ctx.closePath()
          ctx.stroke()

          //后脚
          ctx.beginPath()
          ctx.lineWidth = '5'
          ctx.arc(506,450,15,1.0*Math.PI,2*Math.PI,false)
          ctx.closePath()
          ctx.stroke()
    </script>
</body>

2、运行效果

原文链接：https://blog.csdn.net/weixin_61561066/article/details/124639069