HTML5
前端小bai
这个作者很懒,什么都没留下…
展开
-
HTML5-canvas
什么是canvas?HTML5 <canvas> 元素用于图形的绘制,通过脚本 (通常是JS)来完成. <canvas> 标签只是图形容器,必须使用脚本来绘制图形浏览器支持情况如何使用canvas?添加canvas标签获得canavs元素(可以理解为画布)获得canvas上下⽂文对象(可以理解为画笔) <canvas width="500" height="500" id="canv原创 2017-04-19 10:12:49 · 583 阅读 · 0 评论 -
canvas实现高斯模糊
对于模糊图片这个效果的实现,其实css3中的filter属性也能够实现,但是这个属性的兼容性不是很好,所以我们通常不用这种方法实现,而使用canvas配合JS实现。高斯模糊就是按照高斯曲线对图片进行模糊处理,所谓”模糊”,可以理解成每个像素都取周边像素的平均值,这样的话就会是图片像素值处于一种“平滑化”,产生模糊的效果。局部模糊效果图gauss.js代码function gaussBlur(imgD原创 2017-04-19 14:32:14 · 9344 阅读 · 1 评论 -
canvas实现刮刮卡
效果图canvas上下文对象的globalCompositeOperation属性:刮刮卡功能主要是使用这个值的设置来实现的,之前介绍过globalCompositeOperation属性共有11种值,详细介绍可以访问HTML 5 Canvas 参考手册这里简单的对11种值做一下截图:他这里写的源对象可以理解为后加上去的图形,就是在原有图形上后添加的图形。 刮刮卡功能的实现就是使用ctx.glob原创 2017-04-19 22:04:24 · 958 阅读 · 0 评论