canvas(画布)
html实例
<canvas id="myCanvas" width="200" height="100"></canvas>
使用style增加边框
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000"></canvas>
使用js绘制图像
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000"></canvas><script>var doc = document;var c = doc.getElementById("myCanvas");var ctx = c.getContext("2d");ctx.fillStyle="#ff0000";ctx.fillRect(0,0150,75)</script>上面的fillStyle方法拥有的参数（x轴，y轴，width，height）；
Canvas-路径
1.moveTo(x,y)定义线条开始坐标
2.lineTo(x,y)定义线条结束坐标
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000"></canvas><script>var doc = document;var c = doc.getElementById("myCanvas");var ctx = c.getContext("2d"); ???ctx.moveTo(0,0); ???ctx.lineTo(200,100); ???ctx.stroke();//绘制线条</script>Canvas-圆
方法：arc(x,y,r,start,stop,counterclockwise)；
x:圆的中心的x坐标
y:圆的中心的y坐标
r：圆的半径
start：起始角，以时钟的三点钟起始。
stop：结束角。
counterclockwise:可选，规定应该逆时针还是顺时针，false=顺时针，true-=逆时针。
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000"></canvas><script>var doc = document;var c = doc.getElementById("myCanvas");var ctx = c.getContext("2d"); ??ctx.beginPath(); ???ctx.arc(95,50,40,0,2*Math.PI); ???ctx.stroke();</script>具体请参考：http://www.w3school.com.cn/tags/html_ref_canvas.asp
html5-canvas
原文地址：http://www.cnblogs.com/MJ-MY/p/8040292.html