全国服务热线:4008-888-888

技术知识

详解html5 canvas常见api总结(2)

canvas能够绘图出许多奇特的款式和漂亮的实际效果,根据几个简易的api便可以在画布上展现出千姿百态的实际效果,还能够制做网页页面手机游戏,接下来就总结1下和制图相关的API。

美术绘画的情况下canvas非常于画布,而context非常于画笔。

1.绘图线条

moveTo(x0,y0):把当今画笔(ictx)挪动到(x0,y0)这个部位。

lineTo(x1,y1):从当今部位(x0,y0)处到(x1,y1)画1条平行线。

beginPath():打开1条相对路径或重设当今相对路径。

closePath():从当今点返回相对路径起止点,也便是上1个beginPath的部位,逃避和相对路径。

stroke():绘图。务必加了这个涵数才会画图,因此这个1定要放在最终。

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涵数后边,则不容易绘图成1个闭合的线条,由于在闭合前,早已绘图了,因此左侧那条平行线不容易画出来。

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,要不然1直会以第1个为基本对话,在最终的stroke的情况下,会再度画1条黑色的斜线,1共3条线。

ictx.strokeStyle="#000000";

ictx.lineCap="butt";

ictx.lineWidth=10;

ictx.moveTo(80,10);

ictx.lineTo(10,80);

ictx.stroke(); 

beginPath和closePath能够不了对出現,二者之间基本上沒有关联,closePath是用来闭合终点站和起止点画1条闭合相对路径的。

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();    

绘图曲线图的起始点和水平线完毕点与设定的第1个点的连线相切,曲线图的终点站和第1个设定点与第2个设定点的连线相切。  

quadraticCurveTo(x1,y1,x2,y2):2次贝塞尔曲线图。(x1,y1)操纵点的座标,(x2,y2)完毕点的座标

bezierCurveTo(x1,y1,x2,y2,x,y):3次贝塞尔曲线图。(x1,y1)操纵点1的座标,(x2,y2)操纵点2的座标 (x,y)完毕点的座标。

贝塞尔曲线图在绘图1些十分顺畅的曲线图时十分有效。 

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=⑴0;

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;//这里渐变色是1个目标,用来向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是1个照片目标,后边的主要参数是用来设置照片的反复方法。

 9.别的有关API

fill():填当做前相对路径。

isPointInPath():ictx.isPointInPath(x,y);分辨这个点是不是坐落于当今相对路径

消除画布方式:获得画布的宽高,icanvas.height,icanvas.width;随后应用clearRect();

改动画布的宽高:icanvas.width='200';icanvas.width='300'的方式。

globalAlpha:设定全透明度,只能是0~1的数据,假如全透明度不1样,在画第2幅以前再次设定便可。

toDataURL:icanvas.toDataURL(type,encoderOptions),这个涵数回到1个image的base64的URI,主要参数全是可选的,type能够设定照片种类如image/jpeg,image/webp,默认设置是image/png;encoderOptions是1个0~1的数据,用来设定image/jpeg,image/webp的照片品质,别的文件格式的type设定这个主要参数失效。

 10.裁剪

clip():从画布中裁剪随意样子和规格的画布,以后全部的制图都会被限定在裁剪的地区内。这个方式一般和绘图矩形框,圆形等相对路径1起应用,在这些方式后边,裁切这个图象,后来画的就务必在这个裁切后的画布到了。

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()涵数修复到以前储存的情况,可是正中间做的实际操作不容易消退哈。

以上便是本文的所有內容,期待对大伙儿的学习培训有一定的协助,也期待大伙儿多多适用脚本制作之家。



在线客服

关闭

客户服务热线
4008-888-888


点击这里给我发消息 在线客服

点击这里给我发消息 在线客服