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>
