其他分享
首页 > 其他分享> > HTML5 画布 火柴人实例及代码

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