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：方形端点

                     
    5、线条的路径

    
       (1)重置路径：beginPath()
       
       (2)闭合路径：closePath()

       
    6、图形填充
    

        fill()
        fillStyle="颜色" //设置填充色

        
    7、绘制圆

    
        arc(x,y,r,开始角,结束角,方向)
        
         x和y：表示圆心坐标
         
         r：圆半径
         
         开始角：0、0.5*Math.PI、1*Math.PI、1.5*Math.PI、2*Math.PI
         
         结束角：0、0.5*Math.PI、1*Math.PI、1.5*Math.PI、2*Math.PI
         
         方向：true(逆时针)、false(顺时针)

代码如下：

 <canvas id="cas" width="1000" height="1000">您的浏览器不支持此画布</canvas>

    <script>
        var ctx = document.getElementById("cas").getContext('2d');
        //1.绘制头部
        ctx.beginPath();
        ctx.arc(200, 105, 35, 0, 2 * Math.PI, true);
        ctx.lineWidth = '5';
        ctx.stroke();

        //2.绘制脖子
        ctx.beginPath();
        ctx.moveTo(200, 140);
        ctx.lineTo(200, 155);
        ctx.stroke();
        //3.绘制身体
        ctx.beginPath();
        ctx.moveTo(200, 155);
        ctx.lineTo(200, 270);
        ctx.lineWidth = 35;
        ctx.stroke();
        //4.绘制文件
        ctx.beginPath();
        ctx.moveTo(150, 205);
        ctx.lineTo(250, 205);
        ctx.lineTo(250, 260)
        ctx.lineTo(150, 260);
        ctx.lineWidth = 2;
        ctx.closePath();
        ctx.fillStyle = 'red';
        ctx.fill();
        ctx.stroke();

        //6.绘制胳膊
        ctx.beginPath();
        ctx.moveTo(200, 155);
        ctx.lineTo(240, 210);
        ctx.lineTo(200, 250);
        ctx.lineWidth = 10;
        ctx.stroke();

        //7.绘制拳头
        ctx.beginPath();
        ctx.arc(200, 250, 10, 0, 2 * Math.PI, true);
        ctx.fillStyle = 'black';
        ctx.fill();

        //8.绘制左腿
        ctx.beginPath();
        ctx.moveTo(200, 260);
        ctx.lineTo(180, 440);
        ctx.stroke();

        //8.绘制右腿
        ctx.beginPath();
        ctx.moveTo(200, 260);
        ctx.lineTo(220, 440);
        ctx.stroke();
        //9.绘制左脚
        ctx.beginPath();
        ctx.arc(165, 440, 16, 0, 1 * Math.PI, true);
        ctx.lineWidth = 5;
        ctx.stroke();
        ctx.beginPath();
        ctx.moveTo(147, 440);
        ctx.lineTo(185, 440);
        ctx.stroke();

        //10.绘制右脚
          ctx.beginPath();
            ctx.arc(205, 440, 16, 0, 1 * Math.PI, true);
            ctx.lineWidth = 5;
            ctx.stroke();
            ctx.beginPath();
            ctx.moveTo(187, 440);
            ctx.lineTo(225, 440);
            ctx.stroke();


    </script>

 展示效果如图

 

标签：lineTo,ctx,画布,PI,stroke,实例,HTML5,beginPath,Math
来源： https://blog.csdn.net/m0_61700036/article/details/120988105