html5中绘制图形：直线、举行、圆、三角线

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
*{
   padding:0px;
   margin:0px;
}
</style>
<script type="text/javascript">
   function Draw(){
       //js中获取id节点
       var c=document.getElementById("mycanvas");
       c.width=500;
       c.height=500;
       var ctx=c.getContext("2d");
       //划直线
       ctx.moveTo(0,0);
       ctx.lineTo(200,200);
       ctx.stroke();//----------------------->划线，开始绘制
   }
   function Draw2(){
       //js中获取id节点
       var c=document.getElementById("mycanvas");
       c.width=500;
       c.height=500;
       var ctx=c.getContext("2d");

       ctx.fileStyle="#ff0000";
       ctx.fillRect(0,0,200,200);
   }

   //圆形
   function Draw1(){
       var c=document.getElementById("mycanvas");
       c.width=5000;
       c.height=5000;
       var ctx=c.getContext("2d");

       ctx.fillStyle="green";//设置颜色
       ctx.beginPath();
       ctx.arc(500,500,80,0,Math.PI*2,true);
       ctx.closePath();
       ctx.fill();           //填充颜色

   }

   //三角形
   function Draw3(){
       var c=document.getElementById("mycanvas");
       c.width=500;
       c.height=500;
       var ctx=c.getContext("2d");

       ctx.strokeStyle="#ff0000";//------------------>给实线上色
       ctx.beginPath();
       ctx.moveTo(25,25);
       ctx.lineTo(25,125);
       ctx.lineTo(125,25);
       ctx.closePath();
       ctx.stroke();
   }

</script>
</head>
<body>
   <canvas id="mycanvas"></canvas>
   <input type="button" value="画直线" onclick="Draw();">
   <input type="button" value="画圆" onclick="Draw1();">
   <input type="button" value="画三角形" onclick="Draw3();">
   <input type="button" value="画矩形" onclick="Draw2();">
</body>
</html>