canvas学习之路(二)特殊绘图功能及实例
2016-11-24 10:08
183 查看
作天的canvas学习有点艰难,涉及到vedio和动画事件,知识点比较多,虽然之前有学过css和H5动画功能,但是忘得真是一干二净,乘着这个机会再复习了一下,所以总结拖到今天。
使用clip()之后,绘制的正方形只有在被剪切区域的部分才会显示。上述代码效果如下图:
设置文本格式有以下几种功能:如下图(具体解释我在代码中已给出)
代码效果如下图:
如果我们要给字体加上阴影效果,怎么办?
效果如下图6:
strokeText()与fillText()的差别
前者绘制的文本没有填色(暂时也没有发现可以给strokeText()内的字体填色的功能,连线条宽度也无法通过linewidth()设置),后者有填色。
*(这里要注意代码中ctx.save()和ctx.restore()的用法。可参考canvas学习之路(一))
效果如下:
]
具体用法可以参看w3c,上面讲得很详细,此处不再赘言。
(X0,Y0)渐变起始点,(X1,Y1)渐变结束点
createLinearGradient()通常与addColorStop()结合使用,后者用来表示对象的颜色和位置。
语法:addColorStop(stop,color)stop的值在0~1之间,表示位置,color则表示该位置的颜色。
效果如下:
重复直到填满整个指定区域为止。
效果如下:
语法二:ctx.drawImage(img,sx,sy,sw,sh,dx,dy,dw,dh);
ctx.drawImage(img,x,y,w,h)中(x,y,w,h)同fillRect(x,y,w,h)里的四个参数含义完全一样。ctx.drawImage(img,sx,sy,sw,sh,dx,dy,dw,dh)中(dx,dy,dw,dh)的含义与语法(一)中的一样。(sx,sy,sw,sh)则是对图片的一个裁切,图片的左上角为(0,0)的点,(sx,sy)是指从图片的某个位置开始裁切,(sw,sh)则是指裁切的宽度和高度。
(一)clip() 从原始画布中剪切任意形状和尺寸,只有剪切部分是可见的,之后所有的绘图都被该区域。
使用clip()之后,绘制的正方形只有在被剪切区域的部分才会显示。上述代码效果如下图:
(二)filltext()画布文本设置功能
语法:fillText(text,X,Y,maxwidth)其中第一个参数代表文本坐标,第二个第三个参数代表绘图文本开始时的坐标,maxwidth代表最大文本宽度。设置文本格式有以下几种功能:如下图(具体解释我在代码中已给出)
代码效果如下图:
如果我们要给字体加上阴影效果,怎么办?
效果如下图6:
strokeText()与fillText()的差别
前者绘制的文本没有填色(暂时也没有发现可以给strokeText()内的字体填色的功能,连线条宽度也无法通过linewidth()设置),后者有填色。
*(这里要注意代码中ctx.save()和ctx.restore()的用法。可参考canvas学习之路(一))
效果如下:
(三)globalCompositeOperation
这个功能比较强大,理解起来跟数学中的差集、补集等功能差不多。]
具体用法可以参看w3c,上面讲得很详细,此处不再赘言。
(四)createLinearGradient()创建线性渐变对象
语法:createLinearGradient(X0,Y0,X1,Y1)(X0,Y0)渐变起始点,(X1,Y1)渐变结束点
createLinearGradient()通常与addColorStop()结合使用,后者用来表示对象的颜色和位置。
语法:addColorStop(stop,color)stop的值在0~1之间,表示位置,color则表示该位置的颜色。
效果如下:
(五)createRadialGradient();径向渐变
createRadialGradient(x1,y1,radius1,x2,y2,radius2);前面三个参数表示起始圆的圆心及半径,后面三个参数表示结束圆的圆心及半径。(五)createPattern();在指定的方向上重复指定的元素。
语法:createPattern(img,repeat|repeat-X|repeat-Y|no-repeat)重复直到填满整个指定区域为止。
效果如下:
(六)drawImage()用于将图片添加到画布的指定的位置。
语法一:ctx.drawImage(img,x,y,w,h)语法二:ctx.drawImage(img,sx,sy,sw,sh,dx,dy,dw,dh);
ctx.drawImage(img,x,y,w,h)中(x,y,w,h)同fillRect(x,y,w,h)里的四个参数含义完全一样。ctx.drawImage(img,sx,sy,sw,sh,dx,dy,dw,dh)中(dx,dy,dw,dh)的含义与语法(一)中的一样。(sx,sy,sw,sh)则是对图片的一个裁切,图片的左上角为(0,0)的点,(sx,sy)是指从图片的某个位置开始裁切,(sw,sh)则是指裁切的宽度和高度。
相关文章推荐
- canvas学习之路(一)基础绘图功能解析
- canvas学习之路(二)特殊绘图功能及实例
- 原生js实现Canvas实现拖拽式绘图,支持画笔、线条、箭头、三角形和圆形等等图形绘制功能,有实例Demo
- html5之Canvas路径绘图、坐标变换应用实例
- java学习之路——基于TCP的Socket网络通信实例
- [学习笔记]java SE 学习时候做的一个记事本实例(功能不全)自认为文件读和写还不错
- 学习dotnet第四课关于绘图的自己做的实例源代码,存在这儿,方便复习.
- Delphi 的绘图功能[1] - TCanvas 的类成员
- Android简单数据存储类SharedPreferences详解及实例(通过“记住密码”功能学习SharedPreferences)
- Android简单数据存储类SharedPreferences详解及实例(通过“记住密码”功能学习SharedPreferences)
- Canvas绘图学习
- Delphi 的绘图功能[12] - TPen 类(下) : 学习橡皮线
- jsp常用功能模块-JSP实例学习教程
- Android简单数据存储类SharedPreferences详解及实例(通过“记住密码”功能学习SharedPreferences)
- JXCELL实例学习与研究(六) 之 sheet的分页功能的实现,以及基本EXCEL公式的使用 以及补充函数说明
- java学习之路——基于UDP的Socket网络通信实例
- jsp常用功能模块-JSP实例学习教程
- jsp常用功能模块-JSP实例学习教程
- Delphi 的绘图功能[12] - TPen 类(下) : 学习橡皮线
- Java学习之路——利用JDOM对xml文档进行解析等操作实例