canvas的绘图api使用详解


当前第2页 返回上一页

1

2

3

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:阴影的垂直距离

1

2

3

4

5

6

7

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的值。

1

2

3

4

5

6

7

8

9

10

11

12

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

1

2

3

4

5

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

相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!

推荐阅读:

分页查询的使用详解

JS的日期相关函数使用详解

Node.js如何开发微信墙

以上就是canvas的绘图api使用详解的详细内容,更多文章请关注木庄网络博客

返回前面的内容

相关阅读 >>

canvas中线段的端点与连接点详解

html5新特性之移动设备api

介绍一个用html5 canvas 制作的时钟

canvas中普通动效与粒子动效的实现 方法介绍(代码示例)

html与xhtml的区别详解

canvas贝塞尔公式推导与物体跟随复杂曲线轨迹运动

html5canvas save如何保存恢复状态?

h5 canvas实现圆形动态加载进度实例

h5的canvas做出圆形进度条并显示数字百分比

canvas处理图片的方法

更多相关阅读请进入《canvas》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...