Canvas的使用

规定元素的 id、宽度和高度：

<canvas id="myCanvas" width="200" height="100"></canvas>

JavaScript 使用 id 来寻找 canvas 元素：
var c=document.getElementById("myCanvas");
然后，创建 context 对象：
var cxt=c.getContext("2d"); 
cxt.fillStyle="#FF0000";
cxt.fillRect(0,0,150,75); 
fillStyle 方法将其染成红色，fillRect 方法规定了形状、位置和尺寸。
理解坐标
上面的 fillRect 方法拥有参数 (0,0,150,75)。
意思是：在画布上绘制 150x75 的矩形，从左上角开始 (0,0)。
如下图所示，画布的 X 和 Y 坐标用于在画布上对绘画进行定位。

最基本的一个图案就完成了

cxt.moveTo(10,10);//先保存一个点
cxt.lineTo(150,50);//下一个点经过这里，会连接这个点
cxt.lineTo(10,50);下一个点经过这里，会连接这个店
cxt.stroke();//把此图案绘制到画布上
beginPath()是重新开始新路径，而把之前的路径都清空掉

  
  
context.arc(x,y,radius,a,b,anclockwise)  
x : 起始点横坐标  
y : 起始点纵坐标  
radius : 半径  
a : 开始角度  
b : 结束角度  
anticlockwise : 是否逆时针  

closePath的意思不是结束路径，而是 关闭 路径，它会试图从当前路径的终点连一条路径到起点，让整个路径闭合起来。
但是，这并不意味着它之后的路径就是新路径了！
总而言之，就是 不要企图通过闭合现有路径来开始一条新路径 ，而开始一条新路径，以前的路径也不会闭合。
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
var img=new Image()
img.src="IMG_3326.png"
img.οnlοad=function(){
	cxt.drawImage(img,-20,-20);
}
放图案的话，一定要弄个事件