详解html5 canvas常用api总结(二)--绘图API

canvas可以绘制出很多奇妙的样式和美丽的效果，通过几个简单的api就可以在画布上呈现出千变万化的效果，还可以制作网页游戏，接下来就总结一下和绘图有关的API。

绘画的时候canvas相当于画布，而context相当于画笔。

1.绘制线条

moveTo(x0,y0)：把当前画笔（ictx）移动到（x0,y0）这个位置。

lineTo(x1,y1):从当前位置(x0,y0)处到（x1，y1）画一条直线。

beginPath()：开启一条路径或者重置当前路径。

closePath():从当前点回到路径起始点，也就是上一个beginPath的位置,回避和路径。

stroke():绘制。必须加了这个函数才会画图，所以这个一定要放在最后。

var icanvas=document.getElementById("iCanvas");

var ictx=icanvas.getContext("2d");

ictx.beginPath();

ictx.moveTo(0,0);

ictx.lineTo(300,150);

ictx.lineTo(3,150);

ictx.closePath();

ictx.stroke(); 

效果：

这里要注意，如果closepath放在stroke函数后面，则不会绘制成一个闭合的线条，因为在闭合前，已经绘制了，所以左边那条直线不会画出来。

2.线条样式

lineCap：线条端点样式,butt,round,square。                        

lineJoin：两线条相交时的拐点样式，其中设置为miter时还可以通过miterLimet设置拐点交界处的最大长度。　　　　　　　　　　　

miterLimet:如果斜接长度超过 miterLimit 的值，边角会以 lineJoin 的 "bevel" 类型来显示。

lineWidth：线条宽度

strokeStyle： 线条颜色、渐变(定义好的渐变对象)、模式。 context.strokeStyle="#333";

var iCanvas=document.getElementById("iCanvas");

var ictx=iCanvas.getContext("2d");

ictx.beginPath();

ictx.strokeStyle="#0000ff";

ictx.lineWidth=20;

ictx.lineCap="round";

ictx.moveTo(10,10);

ictx.lineTo(80,80);

ictx.stroke();

ictx.beginPath();//在这里必须beginPath，不然一直会以第一个为基础会话，在最后的stroke的时候，会再次画一条黑色的斜线，一共3条线。

ictx.strokeStyle="#000000";

ictx.lineCap="butt";

ictx.lineWidth=10;

ictx.moveTo(80,10);

ictx.lineTo(10,80);

ictx.stroke(); 

beginPath和closePath可以不成对出现，两者之间几乎没有关系，closePath是用来闭合终点和起始点画一条闭合路径的。

3.绘制曲线

arc(x,y,radius,startAngle,endAngle,anticlockwise):绘制曲线，radius是曲线半径，startAngle,endAngle开始角度和结束角度，用的是弧度(Math.PI/180)*角度值，anticlockwise绘制方向；

arcTo(x1,y1,x2,y2,radius):绘制两切线之前的曲线。

ictx.beginPath();

ictx.moveTo(20,20);           // 创建开始点

ictx.lineTo(100,20);          // 创建水平线

ictx.arcTo(150,20,150,70,50); // 创建弧

ictx.lineTo(150,120);         // 创建垂直线

ictx.stroke();    

绘制曲线的起点和水平线结束点与设置的第一个点的连线相切，曲线的终点和第一个设置点与第二个设置点的连线相切。　　

quadraticCurveTo(x1,y1,x2,y2):二次贝塞尔曲线。（x1，y1）控制点的坐标，（x2，y2）结束点的坐标

bezierCurveTo(x1,y1,x2,y2,x,y):三次贝塞尔曲线。（x1，y1）控制点1的坐标，（x2，y2）控制点2的坐标 （x,y）结束点的坐标。

贝塞尔曲线在绘制一些非常流畅的曲线时非常有用。 

4.绘制矩形及填充

rect():创建矩形；

fillRect(x,y,width,height):绘制被填充的矩形:(x,y)起始点，width，height矩形宽高

strokeRect()：绘制矩形线框

clearRect():清除掉矩形。

ictx.fillStyle="#0000ff";//设定填充颜色

ictx.fillRect(20,20,150,100);

ictx.strokeRect(180,20,100,100); 

5.画笔属性

fillStyle:设置填充的颜色，渐变或模式（patten）；

strokeStyle：画笔的颜色，渐变或者模式

6.绘制阴影

shadowColor：阴影yanse

shadowBlur:模糊级别

shadowOffsetX：阴影的水平距离