关于<canvas>那些事

<canvas>在不兼容的老浏览器上展示替代内容，支持<canvas>的浏览器将会忽略在容器中包含的内容，并且只是正常渲染canvas。

我们可以提供对canvas内容的文字描述或者是提供动态生成内容相对应的静态图片，如下所示：

<canvas id = "test" width = "150" height = "150">

这是一个文字替换示例

</canvas>

<canvas id = "test2" width = "150" height = "150">

<img src="images/shili.jpg" width="150" height = "150" alt = "" />

</canvas>

CanvasRenderingContext2D 此接口提供了 getContext()方法，该方法用来获得渲染上下文和他的绘画功能。

var canvas = document.getElementById('test');

car ctx = canvas.getContext('2d');

getContext();此方法只有一个参数（上下文格式），代码第一行通过document.getElementById()；方法获取<canvas>元素的DOM对象，接着使用getContext()来访问绘画上下文。

绘制矩形：

canvas提供了三种方法绘制矩形：

one、fillRect(x,y,width,height);                绘制一个填充的矩形

two、strokeRect(x,y,width,height);          绘制一个矩形的边框

three、clearRect(x,y,width,height);         清除指定矩形区域，让清除部分完全透明

绘制路径：

beginPath();    新建一条路径，生成之后，图形绘制命令被指向到路径上生成路径。

closePath();    闭合路径之后图形绘制命令又重新指向到上下文中。

stroke();          通过线条来绘制图形轮廓。

fill();                 通过填充路径的内容区域生成实心的图形。

例如绘制一个三角形：

ctx.beginPath();          //新建路径，
ctx.moveTo(75,50);   //定义线条开始坐标
ctx.lineTo(100,75);     //定义线条结束坐标
ctx.lineTo(100,25);  //定义线条结束坐标
ctx.fill();   //填充路径区域形成填充图形

注：当你调用fill()函数时，所有没有闭合的形状都会自动闭合，所以你不需要调用closePath()函数。但是调用stroke()时不会自动闭合。

这个例子中用到了一个moveTo();的函数，此函数设置了一个路径的起点，如上例中这个三角形的起点是X轴75px，Y轴50px，的位置。我们可以使用此函数绘制不连续的路径。

上例中还涉及到lineTo();函数，次函数绘制一条从当前位置到指定x以及y位置的直线。由于我们调用了moveTo();函数所以这条直线的起始位置是我们设定75px,50px。该方法有两个参数：x以及y ，代表坐标系中直线结束的点。开始点和之前的绘制路径有关，之前路径的结束点就是接下来的开始点，等等。。。开始点也可以通过moveTo()函数改变。

// 填充三角形
ctx.beginPath();
ctx.moveTo(25,25);
ctx.lineTo(105,25);
ctx.lineTo(25,105);
ctx.fill();
// 描边三角形
ctx.beginPath();
ctx.moveTo(125,125);
ctx.lineTo(125,45);
ctx.lineTo(45,125);
ctx.closePath();
ctx.stroke();

画圆和弧

arc(x,y,radius,startAngle,endAngle,anticlockwise)

画一个以（x,y）为圆心的以radius为半径的圆弧（圆），从startAngle开始到endAngle结束，按照anticlockwise给定的方向（默认为顺时针）来生成。


x,y为绘制圆弧所在圆上的圆心坐标。radius为半径。startAngle以及endAngle参数用弧度定义了开始以及结束的弧度。这些都是以x轴为基准。参数anticlockwise为一个布尔值。为true时，是逆时针方向，否则顺时针方向。


注：arc()函数中的角度单位是弧度，不是度数。角度与弧度的js表达式:radians=(Math.PI/180)*degrees。


二次贝塞尔曲线及三次贝塞尔曲线：

quadraticCurveTo(cp1x, cp1y, x, y)绘制二次贝塞尔曲线， cp1x,cp1y为一个控制点， x,y为结束点。 bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)绘制三次贝塞尔曲线， cp1x,cp1y为控制点一， cp2x,cp2y为控制点二， x,y为结束点。