随笔分类 -  canvas

canvas总结
摘要:save 和 restore 函数的应用 保存canvas和恢复canvas clip函数的应用 文字的绘制 背景图片的绘制 离屏canvas 基于时间的运动 阅读全文
posted @ 2018-01-31 10:50 黑客PK 阅读(332) 评论(0) 推荐(0)
摘要:可以查看demo:http://sandbox.runjs.cn/show/hjb2hzzx(建议查看console查看点击后的改变) 具体原理是每次点击的时候去判断当前的鼠标坐标是属于哪一个路径下的,对当前的这个形状改变状态。 参考:http://www.imooc.com/video/4320/ 阅读全文
posted @ 2016-12-19 15:06 黑客PK 阅读(3320) 评论(0) 推荐(0)
摘要:在之前做移动端小游戏幸运转盘、九宫格转盘,使用到了 canvas ,也是第一次在项目中使用 canvas 来实现。 近期测试人员反应 canvas 绘制的内容太模糊,心想着用 canvas 绘制出来的怎么会模糊,先前也有考虑到适配不同尺寸的移动设备,担心直接使用 img 或者设置 backgroun 阅读全文
posted @ 2016-08-29 12:01 黑客PK 阅读(15068) 评论(0) 推荐(1)
摘要:1、原理:先创建一张img图片,用filter滤镜制作毛玻璃效果。 2、利用绝对定位,使canvas刚好盖在img上面。 3、利用canvas原生clip函数剪辑一个圆形。 地址:http://sandbox.runjs.cn/show/c3mlltak 源代码: 阅读全文
posted @ 2016-06-20 13:42 黑客PK 阅读(343) 评论(0) 推荐(0)
摘要:canvas的宽度和高度不能用百分比,不然会出现图片模糊扭曲的现象。 cvs.width--cvs.height >定义的是画布的宽度和高度。可以把画布的宽度和高度定义的高一些,里面绘制的东西大一些,然后就可以实现在高清屏幕下也不会变得模糊了。 cvs.style.width和cvs.style.h 阅读全文
posted @ 2016-04-21 17:53 黑客PK 阅读(443) 评论(0) 推荐(0)