canvas

从接触前端开始，个人钟爱canvas，对于钟爱的技术，我竟然在某电话面试上竟然一紧张，竟然忘记了获取画布。所以还是整理一下。
1.获取画布：

var canvas=getElementById("id");

2.获取画笔

var con =canvas.getContext("2d");//似乎木有见过3d

3.开始画图：

con.fillStyle=color|gradient|pattern;//充绘画的颜色、渐变或模式。
con.strokeStyle=color|gradient|pattern;//边框颜色、渐变或模式。

画矩形：

con.fillRect(x1, y1, heigh, width);//绘制空心矩形
con.strokeRect(x2, y2, heigh, width);//绘制实心矩形

画线：

con.beginPath();//开始
con.lineWidth="5";//宽度5像素
con.strokeStyle="red"; // 红色路径
con.moveTo(0,75);//起点
con.lineTo(250,75);//终点
con.stroke(); // 进行绘制

画圆：
con.arc(x, y, radius, startAngle, endAngle, anticlockwise)
(x,y);圆心,
radius:半径
startAngle:开始的角度
endAngle:结束的角度,
anticlockwise:是否逆时针(可省)

con.arc(20,20,10,0,Math.PI*2);//半径为10的整圆 

渐变色：

createLinearGradient(0,0,0,170)//渐变的开始点和结束点
addColorStop(stop，color)；//渐变色结束的位置（0-1）和颜色
fillstyle=gradient；

var grad=ctx.createLinearGradient(0,0,0,170)；
grad.addColorStop(0,"black")；
grad.addColorStop(1,"white")；
ctx.fillStyle=grad；

效果图：