详解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：阴影的水平距离

shadowoffsety：阴影的垂直距离

ictx.shadowblur=20;

ictx.shadowcolor="#456";

ictx.shadowoffsetx=-10;

ictx.shadowoffsety=30;//先设置阴影再画矩形

ictx.fillstyle="#108997";

ictx.fillrect(20,20,100,80);

ictx.stroke(); 

 7.绘制渐变

 createlineargradient(x1,y1,x2,y2):绘制线性渐变，(x1,y1)是渐变的起始点，（x2,y2）是渐变的终点，位置不同可以制作出垂直或者水平渐变。

 createradialgradient(x1,y1,r1,x2,y2,r2)：径向渐变：，(x1,y1)是渐变的起始点圆心，r1是半径，（x2,y2）是渐变的终点，r2是结束点半径;

两种渐变都需要使用

addcolorstop(stop,color)来设置渐变过程，stop是0.0到1.0的值。

var grd=ictx.createlineargradient(0,0,170,0);

grd.addcolorstop(0,"#000");

grd.addcolorstop(0.5,"#378923");

grd.addcolorstop(1,"#ddd");

ictx.fillstyle=grd;//这里渐变是一个对象，用来向fillstyle传值

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

 

var grd=ictx.createradialgradient(300,225,15,250,225,100);

grd.addcolorstop(0,"#345");

grd.addcolorstop(1,"#fff");

ictx.fillstyle=grd;

ictx.fillrect(200,150,150,100); 

8.填充背景

 createpattern(image,"repeat|repeat-x|repeat-y|no-repeat"):image是一个图片对象，后面的参数是用来设定图片的重复方式。

 9.其他相关api

fill():填充当前路径。

ispointinpath():ictx.ispointinpath(x,y);判断这个点是否位于当前路径

清除画布方法：获取画布的宽高，icanvas.height,icanvas.width;然后使用clearrect();

修改画布的宽高：icanvas.width='200'；icanvas.width='300'的方法。

globalalpha:设置透明度，只能是0~1的数字，如果透明度不一样，在画第二幅之前重新设置即可。

todataurl:icanvas.todataurl(type,encoderoptions)，这个函数返回一个image的base64的uri，参数都是可选的，type可以设置图片类型如image/jpeg,image/webp，默认是image/png；encoderoptions是一个0~1的数字，用来设置image/jpeg,image/webp的图片质量，其他格式的type设置这个参数无效。

 10.剪裁

clip():从画布中剪裁任意形状和尺寸的画布，之后所有的绘图都会被限制在剪裁的区域内。这个方法通常和绘制矩形，圆形等路径一起使用，在这些方法后面，剪切这个图像，后来画的就必须在这个剪切后的画布上了。

ictx.arc(100,100,50,(math.pi/180)*0,(math.pi/180)*360,true);

ictx.stroke();

ictx.clip();

ictx.fillstyle="green";

ictx.fillrect(0,0,150,100); 

如果还想操作外部的画布，在剪切前使用save()函数保存，剪切后使用restore()函数恢复到之前保存的状态，但是中间做的操作不会消失哈。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。