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

<!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>

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

猜你喜欢