<canvas></canvas>是html5出现的新标签，像所有的dom对象一样它有自己本身的属性、方法和事件，其中就有绘图的方法，js能够调用它来进行绘图
<canvas id="myCanvas" width="400" height="400"></canvas>默认宽度300px，默认高度 150px;
下面是简单的语法，是必须要记住的。
绘图路径:
beginPath() :开始路径
closePath():结束路径
moveTo(x,y):将触笔移动到x,y点
lineTo(x,y):绘制到x,y点
stroke(): 触笔方法 画线 默认为黑色
fill():填充方法
rect(x,y,w,h):矩形路径
save():保存路径
restore():恢复路径
简单的圆形绘制
绘制圆形：
arc(x,y,r,0,360360*Math.PI/180,false)
x,y 圆心坐标位置
r 圆半径
0,360 从0度到360度 绘制一个圆形
true/false 顺时针/逆时针绘图
<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<title></title>
<style>
* {
margin: 0;
padding: 0;
}
#can{background:#FFBBAA;}
</style>
</head> <body>
<canvas id="can" width="500" height="500">
<script type="text/javascript">
var oCan=document.getElementById("can");
var content=oCan.getContext('2d');
content.translate(250,250); //外
content.save();
content.beginPath()
content.arc(0,0,150,0,360*Math.PI/180,false);
content.lineWidth=20;
content.closePath();
content.strokeStyle="#c20f24";
content.stroke();
content.restore()
//中
content.save();
content.beginPath()
content.arc(0,0,100,0,360*Math.PI/180,false);
content.lineWidth=30;
content.strokeStyle="#c20f24";
content.stroke();
content.closePath();
content.restore()
content.fillStyle="#0b1c3a";
content.fill(); //五角星
for(var i=0;i<5;i++){
content.save();
content.rotate(i*72*Math.PI/180);
content.beginPath()
content.fillStyle="#fff";
content.strokeStyle="#fff";
content.moveTo(0,-100);
content.lineTo(-25,-30);
content.lineTo(0,0)
content.lineTo(25,-30); content.closePath();
content.stroke();
content.fill();
content.restore()
}
</script>
</canvas>
</body> </html>
我也是刚刚学习，不足之处，多多指出，大家共同学习。