随笔分类 -  html5

html5 canvas 粒子特效
摘要：不知不觉就已经好久没写过博客了，自从七月正式毕业后，离开了实*了将*九个月的老东家，进了鼠厂后，做的事都是比较传统的前端活，之前在tpy的时候只管做移动h5的特效以及小游戏，再加上实*所以时间比较充裕，canvas玩的比较多，而现在因为工作都是些传统前端工作，而且也忙，就基本上没再写过canvas相 阅读全文
posted @ 2017-07-27 11:26 管的宽 阅读(1668) 评论(0) 推荐(0)
微信网页授权的一些总结
摘要：1.授权一定要关注公众号吗？答：授权不一定非要关注公众号。 2.授权只能在线上执行吗？答：是的，否则会报redirect uri 参数错误。这里需要公众号设置一个安全的网址。比如：zhudianbao.diandodo.com，其他的，包括本地的都无法成功授权。 3.授权后获取的openid是对所有 阅读全文
posted @ 2017-06-28 16:38 管的宽 阅读(4257) 评论(0) 推荐(1)
html5 audio js控制暂停播放停止
摘要：<!DOCTYPE HTML><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title></title> </head> <body> 阅读全文
posted @ 2017-03-13 14:12 管的宽 阅读(5947) 评论(0) 推荐(0)
HTML5模仿刮奖效果-页面涂抹消失插件wScratch
摘要：前言 HTML5的canvas有很多应用点，如绘画板、图形绘制、游戏交互、彩票刮刮乐等，除了这些，还有个比较好的点就是主页涂抹一部分之后，页面消失进入主要内容。 wScratch是一个模拟刮刮卡的jQuery插件，可以设置刮开纯色或者图像。 演示 显示刮卡百分比 到达一定百分比清空 属性设置 可用的 阅读全文
posted @ 2017-03-13 14:11 管的宽 阅读(1689) 评论(0) 推荐(0)
swiper.js 点击链接跳转后再次返回到轮播原位置
摘要：人们都说：有100个人就有100种方式实现轮播效果。但是本人对移动端的滑屏事件不是太操作自如，所以就找了这个插件swiper.js。由于时间太紧张都没来得及仔细看它的API，现在看看太多了需求是点击页面的其他链接跳转页面后，再次返回时，轮播的当前状态要和跳转前的一样。html： <!-- Swipe 阅读全文
posted @ 2017-03-08 15:29 管的宽 阅读(5059) 评论(0) 推荐(0)
css3处理sprite背景图压缩来解决H5网页在手机浏览器下图标模糊的问题
摘要：最近在负责一个微信H5 App项目，遇到一个郁闷的问题，手机浏览器查看网页时图标都是模糊的，有锯齿，电脑浏览器显示则是正常。大概知道是分辨率适配等类型的问题，后来网上查找了一些办法，大部分的解决方案都是设计一套放大1倍的图标，再压缩显示。 我们都知道标签可以通过固定宽高的方式来压缩大图，从而得到高清 阅读全文
posted @ 2017-02-13 11:11 管的宽 阅读(309) 评论(0) 推荐(0)
移动端H5页面高清多屏适配方案
摘要：背景 开发移动端H5页面 面对不同分辨率的手机 面对不同屏幕尺寸的手机 开发移动端H5页面 面对不同分辨率的手机 面对不同屏幕尺寸的手机 视觉稿 在前端开发之前，视觉MM会给我们一个psd文件，称之为视觉稿。 对于移动端开发而言，为了做到页面高清的效果，视觉稿的规范往往会遵循以下两点： 1）首先，选 阅读全文
posted @ 2017-02-13 11:09 管的宽 阅读(419) 评论(0) 推荐(0)
iOS Safari/WebKit对DeviceOrientationEvent的实现
摘要：背景知识： Apple官方只发现一个文档： https://developer.apple.com/library/safari/#documentation/SafariDOMAdditions/Reference/DeviceOrientationEventClassRef/DeviceOrie 阅读全文
posted @ 2017-02-09 16:04 管的宽 阅读(424) 评论(0) 推荐(0)
手机端重力感应接口及应用
摘要：现在微信开发如火如荼，各种基于微信的H5市场上也是很火爆，今天做个笔记就是跟大家分享手机端重力感应的应用，根据重力感应接口我们可以得到手机的方向，移动速度，xyz轴偏移量，现在先上所有数据展示，大家有兴趣的也可以亲身测试： <!DOCTYPE html><html> <head> <meta cha 阅读全文
posted @ 2017-02-08 10:51 管的宽 阅读(1571) 评论(0) 推荐(0)
H5项目常见问题及注意事项
摘要：Meta基础知识： H5页面窗口自动调整到设备宽度，并禁止用户缩放页面 空白页基本meta标签 其他meta标签 常见问题： 移动端如何定义字体font-family 打电话发短信写邮件怎么实现 移动端touch事件（区分webkit和winphone） 移动端click屏幕产生200-300ms的 阅读全文
posted @ 2017-02-07 15:59 管的宽 阅读(171) 评论(0) 推荐(0)
移动端 h5开发相关内容总结——CSS篇
摘要：1.移动端开发视窗口的添加 h5端开发下面这段话是必须配置的 其它相关配置内容如下： width viewport 宽度(数值/device-width) height viewport 高度(数值/device-height) initial-scale 初始缩放比例 maximum-scale 阅读全文
posted @ 2017-02-07 15:17 管的宽 阅读(2006) 评论(0) 推荐(0)
都2017年了，H5这些知识你还不知道?
摘要：一、 交互上，慎用横屏展示效果。但是在今年的微信传播中，好的创意也可以尝试使用。 原因：体验上，需要用户设备开启屏幕旋转功能，才能正常观看，用户操作成本高。对不同屏幕的手机，长宽比例不一，难以展示最佳的视觉效果。 原因：体验上，需要用户设备开启屏幕旋转功能，才能正常观看，用户操作成本高。对不同屏幕的 阅读全文
posted @ 2017-01-18 11:04 管的宽 阅读(794) 评论(0) 推荐(0)
一种解决h5页面背景音乐不能自动播放的方案
摘要：场景：微信、浏览器、App 普通解决方案：采用audio标签的autoplay属性 现象： $解决方案：监听WeixinJSBridgeReady事件、DOMContentLoaded事件 微信的JS API建立在微信壳浏览器的内置JS对象WeixinJSBridge上，WeixinJSBridge 阅读全文
posted @ 2017-01-18 11:03 管的宽 阅读(5036) 评论(0) 推荐(0)
svg动画学习
摘要：首先我们定义一块画布，然后在上面画一个圆形。 他看起来应该是这个样子的：（每一个实例我都会附加图片以及demo链接，方便直观的理解与源代码的查看，查看的时候请使用标准浏览器） 点击查看Demo 现在我们就让这个圆动起来 动起来是这个样子的（gif循环之后234三个demo将无法区分，所以这里的gif 阅读全文
posted @ 2017-01-13 13:45 管的宽 阅读(591) 评论(0) 推荐(0)
svg滤镜学习
摘要：SVG滤镜绝对称得上是他最强大的功能之一，在不影响任何文档结构的前提下，允许你给你的矢量图形添加各种专业视觉效果，我个人给他的定义就是，把PS装到了网页上。 一、 SVG滤镜的原理 基本原理描述太多明显有违我们 “轻松打开” 的目的，这里简单的描述一下，SVG在使用了滤镜的元素里，不会将原始图形直接 阅读全文
posted @ 2017-01-13 13:28 管的宽 阅读(3420) 评论(2) 推荐(3)
SVG基础以及使用Javascript DOM操作SVG
摘要：SVG 不依赖分辨率 支持事件处理器 最适合带有大型渲染区域的应用程序（比如谷歌地图） 复杂度高会减慢渲染速度（任何过度使用 DOM 的应用都不快） 不适合游戏应用 Canvas 依赖分辨率 不支持事件处理器 弱的文本渲染能力 能够以 .png 或 .jpg 格式保存结果图像 最适合图像密集型的游戏 阅读全文
posted @ 2017-01-13 11:22 管的宽 阅读(7815) 评论(0) 推荐(0)