HTML5canvas绘制火柴人

来源：互联网发布：在淘宝上买书需要什么编辑：程序博客网时间：2024/05/17 06:08

发挥想象力我给火柴人头上长了草

<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>火柴人</title> <style> canvas{ border:1px #FF00FF solid; margin-left:300px; } </style> </head> <body> <canvas id="canvas" width="600" height="600"></canvas> </body> </html> <script> var a=document.getElementById("canvas"); var b=a.getContext("2d"); b.beginPath(); b.arc(300,150,80,0,2*Math.PI,true); b.closePath(); b.fillStyle="blank"; b.fill(); b.beginPath(); b.arc(250,73,60,0,3*Math.PI/2,true); b.closePath(); b.fillStyle="green"; b.fill(); b.beginPath(); b.arc(307,12,60,0,-3*Math.PI/2,false); b.closePath(); b.fillStyle="green"; b.fill(); b.beginPath(); b.arc(270,135,12,0,2*Math.PI,true); b.arc(330,135,12,0,2*Math.PI,true); b.closePath(); b.fillStyle="red"; b.fill(); b.beginPath(); b.arc(300,150,56,0,Math.PI); b.lineWidth="5"; b.strokeStyle="red"; b.stroke(); b.beginPath(); b.moveTo(300,230); b.lineTo(300,400); b.lineTo(190,550); b.moveTo(300,400); b.lineTo(500,550); b.moveTo(300,280); b.lineTo(170,340); b.moveTo(300,280); b.lineTo(430,340); b.lineWidth="10"; b.strokeStyle="red"; b.stroke(); b.closePath(); </script>

阅读全文

0 0