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

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()函数恢复到之前保存的状态，但是中间做的操作不会消失哈。

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