1 2 3 |
|
5.画笔属性
fillStyle:设置填充的颜色，渐变或模式（patten）；
strokeStyle：画笔的颜色，渐变或者模式
6.绘制阴影
shadowColor：阴影yanse
shadowBlur:模糊级别
shadowOffsetX：阴影的水平距离
shadowOffsetY：阴影的垂直距离
1 2 3 4 5 6 7 |
|
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 |
|
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 |
|
如果还想操作外部的画布，在剪切前使用save()函数保存，剪切后使用restore()函数恢复到之前保存的状态，但是中间做的操作不会消失哈。
相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！
推荐阅读：
分页查询的使用详解
JS的日期相关函数使用详解
Node.js如何开发微信墙
以上就是canvas的绘图api使用详解的详细内容，更多文章请关注木庄网络博客！
相关阅读 >>
更多相关阅读请进入《canvas》频道 >>
Vue.js 设计与实现 基于Vue.js 3 深入解析Vue.js 设计细节
本书对 Vue.js 3 技术细节的分析非常可靠，对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪，Vue.js作者
