HTML5新增标签--canvas之绘制火柴人

版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/AsaZyf/article/details/82699945

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>绘制火柴人</title>
        <style>
            body{
                width: 100%;
                height: 100%;
                background: black;
            }
            canvas{
                background: #fff;
                
            
            }
        </style>
    </head>
    <body>
        <canvas id="canvas" width="400" height="400">
            你的浏览不支持
        </canvas>
        
        <script>
            var oC = document.getElementById("canvas")
            var oGC = oC.getContext("2d")
            
            //外
            oGC.arc(100,100,50,0,360*Math.PI/180,false)
            oGC.stroke()
            
            //左眼
            oGC.beginPath()
            oGC.fillStyle = "red"
            oGC.arc(80,80,5,0,360*Math.PI/180,false)
            oGC.closePath()
            oGC.fill()
            
            //右眼
            oGC.beginPath()
            oGC.arc(120,80,5,0,360*Math.PI/180,false)
            oGC.closePath()
            oGC.stroke()
            
            //4/1圆
            oGC.beginPath()
            oGC.arc(100,100,20,0,180*Math.PI/180,false)
            oGC.stroke()
            oGC.closePath()
            
            //身体
            oGC.beginPath()
            oGC.moveTo(100,150)
            oGC.lineTo(100,250)
            oGC.closePath()
            oGC.stroke()
            //左手
            oGC.beginPath()
            oGC.moveTo(100,180)
            oGC.lineTo(80,230)
            oGC.closePath()
            oGC.stroke()
            
            //右手
            oGC.beginPath()
            oGC.moveTo(100,180)
            oGC.lineTo(120,230)
            oGC.closePath()
            oGC.stroke()
            //左脚
            oGC.beginPath()
            oGC.moveTo(100,250)
            oGC.lineTo(80,360)
            oGC.closePath()
            oGC.stroke()
            //右脚
            oGC.beginPath()
            oGC.moveTo(100,250)
            oGC.lineTo(120,360)
            oGC.closePath()
            oGC.stroke()
        </script>
        
        
        
        
    </body>
</html>

展开阅读全文

没有更多推荐了,返回首页