HTML/H5
文章平均质量分 89
刻刻帝丶
这个作者很懒,什么都没留下…
展开
-
HTML5利用FormData对象实现显示进度条的文件上传【译】
这篇文章是我翻译的外文,非本人原创 网上看到很多博客都有转载这篇文章 不过转载的都是英文 所以我就决定翻译一下 (翻译和格式化也耗费了一番心血 (~﹃~)~zZ) 英文能力有限,大家凑合看吧(翻译有略微改动) 译文原址:传送门 HTML5终于解决了在上传文件的同时也能显示上传进度的问题 如今,大多网站都使用Flash播放器来实现这一功能 一些网站仍然使用html的form标签翻译 2016-12-20 16:00:31 · 22621 阅读 · 9 评论 -
HTML5多线程JavaScript解决方案Web Worker——专用Worker和共享Worker
不得不说,HTML5确实提供了大量强大的功能特性 甚至颠覆了我们之前理解的JavaScript单线程 它提供了JavaScript多线程的解决方案 这个新特性叫做Web Worker (在此之前没有多线程,setTimeout等本质仍然是单线程) 虽然是多线程编程 不过我们不用担心传统的多线程语言C++、Java等等遇到的多线程问题 下面我们就来看看什么是Web Worker工作线程专原创 2017-02-28 21:10:22 · 9824 阅读 · 2 评论 -
HTML5地理位置定位Geolocation-API及Haversine地理空间距离算法
HTML5提供了Geolocation-API允许我们获取地理位置坐标 不过只有针对特定的需求才会用到 比如说地图应用一般还是很少用到的Geolocation-API使用的方法也很简单 API都存在于navigator.geolocation对象的原型上核心的方法就是getCurrentPostion和watchPositiongetCurrentPositionnavigator.geolo原创 2017-03-01 19:00:31 · 1751 阅读 · 0 评论 -
HTML5文件读取FileReader及文件读取模块的封装
FileReader是File-API重要的组成部分 用于读取本地文件FileReader创建要想使用读取文件功能 同样需要实例化FileReader对象var fr = new FileReader();它为我们提供了一些接口方法和事件方法通过实例对象可以调用5个方法 其中4个指定文件读取方式 另1种方法用来中断文件读取 API 参数 描述 FileReader.readAs原创 2017-03-03 20:53:43 · 3653 阅读 · 0 评论 -
HTML5历史状态管理history API-pushState/replaceState与popstate事件
AJAX技术对我们前端产生了巨大影响 可以让我们的页面无刷新操作减少网络请求 但是它也产生了一些问题 不能够使用浏览器的前进与后退 (后退是浏览器非常常用的按钮)很久很久以前,Gmail借助iframe解决了这个问题 但现在,HTML5提供了超级简单的APIpushState与onpopstatehistory.pushState(stateObject, title, url) 包含三原创 2017-03-07 21:44:05 · 8236 阅读 · 0 评论 -
HTML5无插件多媒体Media——音频audio与视频video
音频与视频现在已经变得越来越流行 各个网站为了保证跨浏览器的兼容性 仍然选择使用flash (源码截自优酷)多媒体标签使用HTML5增加了audio与video两个多媒体标签 兼容性还不错,低版本IE不支持 可以使我们不需要使用任何浏览器插件就原创 2017-03-04 21:04:34 · 4963 阅读 · 0 评论 -
HTML5元素拖拽drag与拖放drop相关API
其实HTML5就是新增一些有用的API 让我们更轻松的开发 从而把更多精力都放在业务逻辑上来 这些API的使用也非常简单 不过我的记性不太好 所以还是以博客的形式记录下来(手动滑稽) 今天就来写一下这个拖拽API默认拖拽说起拖放,其实最早实现拖放功能的还是IE(IE4) H5就是在IE实例的基础上指定的拖拽规范 在浏览器中,是有默认拖拽的 比如说图片的拖拽选中文本的拖拽链接的拖拽元原创 2017-03-08 21:26:50 · 5461 阅读 · 0 评论 -
HTML5客户端数据存储Web Storage——localStorage与sessionStorage
HTML5提供了在客户端存储数据的新方法Web Storage 类似于HTML4中的Cookie 不过它要强大的多Cookie先来简单复习一下之前使用的cookiecookie存储数据到用户设备上,存储的数据量较小只有4KB 可以通过navigator.cookieEnabled检测是否开启了cookie设置cookie document.cookie = 'key=value';获取co原创 2017-01-18 00:02:21 · 3910 阅读 · 2 评论 -
HTML5优化Web动画——requestAnimationFrame
在页面中实现动画,我们有很多选择 可以使用CSS3的transition CSS3中的animation配合keyframes规则 SVG中也可以使用SMIL-animation 最原始的方法就是我们利用JavaScript的setTimeout/setInterval来实现动画 不过现在我们又多了一种方法 requestAnimationFrame优势requestAnimationF原创 2017-01-17 17:46:08 · 2354 阅读 · 0 评论 -
移动端Touch事件与H5-Canvas像素点检测实现刮刮乐
最近又被支付宝的集福字刷屏了 我到底还是没看到敬业福ค(TㅅT) 心塞 今天给大家带来移动端的刮刮乐实现 效果就是这样的手滑动触发刮卡 当刮卡面积达到70%以上,自动刮开全部灰色图层 代码不是很多 全部代码就这些<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta content="wid原创 2017-01-19 21:47:53 · 7299 阅读 · 5 评论 -
HTML5画布Canvas文本填充、线段属性、裁剪、透明度与像素合并方式
CSS3中的很多都可以类比与我们canvas的一些属性 canvas中“画笔”环境对象的很多属性都可以类比CSS3中的属性 我们不仅仅可以绘制图形,还可以向画布中添加文字文字填充同样先获取元素对象与环境对象<canvas id="myCanvas" width=500 height=500></canvas>var canvas = document.getElementById('myCanv原创 2017-01-08 22:56:34 · 11558 阅读 · 0 评论 -
SVG(可缩放矢量图形)基本图形绘制方法与path路径命令
SVG(Scalable Vector Graphics)可缩放矢量图形 用于描述二维矢量图形的一种图形格式 它不是HTML5新增的 很早之前它就出现了 相比于canvas,它更适合作一些小图标icon等等 它的优点就是无论怎样放大,都不会模糊 canvas是js动态绘图,而svg是XML文档来描述绘图 svg-icon网址:传送门 下面我们来看一下如何使用svg绘图创建svg和ca原创 2017-01-15 15:12:37 · 7188 阅读 · 0 评论 -
SVG(可缩放矢量图形)图片添加、高斯模糊、渐变与g标签
今天主要谈一下SVG的特殊效果 其实和canvas都是差不多的,只不过是利用XML标签 用的不是很多但是以防以后万一用到还是整理一下图片添加svg中也可以添加图片<svg width=300 height=300> <image xlink:href="./images/d.jpg" x=100 y=100 height=100 width=100></image></svg>注意这里原创 2017-01-17 14:00:52 · 3763 阅读 · 0 评论 -
SVG(可缩放矢量图形)虚线相关属性与线条动画原理:一条会动的线
SVG可以实现非常酷炫的线条动画甚至是这样的网页 传送门我们可以先来实现一个简单的SVG线条动画 像这样不要着急,在此之前我们需要先了解一些属性值虚线属性虚线属性包括两个stroke-dasharray与stroke-dashoffsetstroke-dasharray大家来看下面的例子 <svg width=300 height=300 viewbox="0 0 30 30"> <pat原创 2017-01-15 22:08:04 · 11164 阅读 · 0 评论 -
SVG(可缩放矢量图形)视区盒属性viewbox与preserveAspectRatio
SVG除了width和height这两个基本的宽高设置属性 还有两个更高级的属性 viewbox与preserveAspectRatio视区盒viewbox是svg标签上的属性 看下面的例子<svg width=300 height=300> <rect x=10 y=10 width=10 height=10></rect></svg>rect { fill: red;}原创 2017-01-15 16:51:21 · 2803 阅读 · 0 评论 -
HTML5画布Canvas图片抽取、像素信息获取、命中检测
今天主要介绍canvas中比较强大的功能 比如将画布内容抽取为图片 获取、修改画布的像素信息 以及画布的命中检测 首先我仍然需要创建画布<canvas id="myCanvas" width=500 height=500></canvas>图片抽取首先要明确的一点是 toDataURL()是canvas对象自身的方法而不是环境对象的 这个方法会将canvas的内容抽取为一张图片(base原创 2017-01-14 20:30:46 · 33357 阅读 · 6 评论 -
HTML5画布Canvas坐标轴转换、图案填充、渐变与阴影
上一篇文章我们了解了一些canvas基本图形绘制 下面我们再来看一些相关操作坐标轴变换我们画布中默认的坐标轴与浏览器坐标轴相同 x正半轴朝右 y正半轴朝下 但是我们可以手动设置画布坐标轴变换 首先还是会获取“画布”和“画笔”<canvas id="myCanvas" width=500 height=500></canvas>var canvas = document.getElement原创 2017-01-08 21:01:57 · 3014 阅读 · 0 评论 -
HTML5画布Canvas线段、矩形、弧形及贝塞尔曲线等简单图形绘制
HTML5中最有意思的就是这个canvas了 通过它我们可以画自己想要的图形 它也是十分重要的技术 应用于游戏、图表等等 或者绘制各种酷炫的东西 这里给大家分享一个网站 传送门 里面都是canvas技术绘制的图形画布创建canvas是html的一个标签 是一个图形容器 首先要在html页面添加一个canvas元素<canvas id="myCanvas" width=500 heig原创 2017-01-08 14:38:11 · 11080 阅读 · 0 评论 -
HTML5+JavaScript-ES6移动端2D飞行射击游戏
前一段时间用JavaScript写了一个飞机游戏的小项目作为练习 js不到2000行 借用了曾经微信飞机大战的资源 画风大概是这个样子的给大家简单介绍一下 感兴趣的同学可以去我的github上查看或下载源码github传送门: https://github.com/paysonTsung/Fighter游戏项目传送门: http://seraphspace.com/Fighter/原创 2017-04-19 16:31:10 · 4083 阅读 · 5 评论