一.离线存储 有一个web应用有三个文件index.html,a.js,b.css，现在需要把js和css文件缓存起来 1.在index.html里加上<html manifest="test.manifest"> 2.manifest清单格式如下CACHE MANIFEST #上面一句必须 #v1.0.0 #需要缓存的文件 CACHE: a.js b.css #不需要缓存的文件 NETWORK: * #无法访问页面 FALLBACK: 404.html 3.manifest文件的mime-type必须是 text/cache-manifest类型 注意点： 1.对于每个index.html?id=...
绘制图片 Var image=new Image(); image.src=” http://img4.duitang.com/uploads/item/201406/25/20140625182321_4MTau.thumb.700_0.jpeg”; image.onload=function(){} Context.drawImage(image,x,y); Context.drawImage(image,x,y,w,h); Context.drawIamge(image,sx,sy,sw,sh,dx,dy,dw,dh); 图片平铺Var pat= context.createPattern(image,”repeat”); Context.fillStyle=pat; Context.fillRect(0,0,400,300); 图片裁剪先绘制好...
本文主要介绍了jQuery+HTML5实现WebGL高性能烟花绽放动画效果,可实现烟花升空爆炸的绚丽动画效果,完成以后非常好看，希望能帮助到大家掌握jQuery和HTML5实现WebGL高性能烟花绽放动画效果。运行效果：完整代码如下：<!DOCTYPE html> <html class=" -webkit- js flexbox canvas canvastext webgl no-touch geolocation postmessage websqldatabase indexeddb hashchange history draganddrop websockets rgba hsla multiplebgs backg...
应用的平台环境：安卓webview；涉及的技术点：（1） <input type="file" > ：在开发中，安卓webview默认点击无法调用文件选择与相机拍照（其他的设备ios等浏览器没有此问题），需要让安卓开发同学在代码调整即可；（2） 点击选择图片后如何展示在页面上呢？很多开发人员估计是直接获取 this.value，这是错误的，不可行。有2个API可以现实，new FileReader与window.URL.createObjectURL（最优）； new FileReader的实现如下：upl...
本文实例讲述了JS/HTML5游戏常用算法之追踪算法。分享给大家供大家参考，具体如下： 追踪算法在动作游戏中非常常见，从很早的游戏《吃豆人》到大型的街机机战类游戏，到处可见追踪效果的身影。一个好的追踪算法将会大大提高游戏的可玩性和玩家的兴趣。 【简单算法】 先来看一个简单的跟踪算法，如下图所示，假设在canvas坐标系中存在物体A和B，物体A将把B作为追踪目标，物体在二维空间中的运动可以分解为坐标系中X、Y轴的运动，其在...
本文实例讲述了JS/HTML5游戏常用算法之碰撞检测 地图格子算法。分享给大家供大家参考，具体如下： 这种算法经常用于RPG（早期的《最终幻想》、《DQ》、《仙剑奇侠传》）、SLG（《炎龙骑士团》、《超级机器人大战》）、PUZ（《俄罗斯方块》、《宝石谜阵》）类型的游戏。这类游戏中，通常情况下整个地图都是由一些地图块元素组成，在制作的时候首先给制作出地图所需要的最基本的元素进行编号，然后把这些编号的地图块组合起来就可以根...
本文实例讲述了JS/HTML5游戏常用算法之碰撞检测 像素检测算法。分享给大家供大家参考，具体如下： 使用像素碰撞检测法算是最精确的算法了，当然，带来的代价也是比较明显的，那就是效率上的低下。除非是在极为特殊的情况下，要求使用非常精确的碰撞，否则，一般情况下在游戏中是不建议使用这种算法，特别是在运行效率不太高的HTML5游戏中。 一般来说在使用像素碰撞检测之前会使用AABB矩形包围盒先检测两个精灵是否有碰撞，如果AABB...
网页制作cnn6文章简介：最常被问起的问题是：在什么情况下我们应该使用这些元素？以及我们应该如何正确的使用这些元素？HTML5带出了一系列新元素，并且将在未来被广泛应用。然而，有一些元素在使用时易被混淆，包括以下两个新元素：<article>和<section>。最常被问起的问题是：在什么情况下我们应该使用这些元素？以及我们应该如何正确的使用这些元素？Section元素这 是一个最容易产生歧义的元素。它与<p>元素有什么区别？我们一直...
1.Application CacheHTML5引入应用缓存，意味着web应用可以进行缓存，即使在没有网络的情况下也能使用。application cache有三个特点离线浏览已缓存的资源加载速度更快减少服务器负载，浏览器将只从服务器下载更新过或更改过的资源使用方法就是在 html标签中添加一个manifest属性每个指定了 manifest 的页面在用户对其访问时都会被缓存。如果未指定 manifest 属性，则页面不会被缓存（除非在 manifest 文件中直接指定了该页面）。m...
HTML5storage提供了一种方式让网站能够把信息存储到你本地的计算机上，并再以后需要的时候进行获取。这个概念和cookie相似，区别是它是为了更大容量存储设计的。Cookie的大小是受限的，并且每次你请求一个新的页面的时候cookie都会被发送过去。HTML5的storage是存储在你的计算机上，网站在页面加载完毕后可以通过Javascript来获取这些数据。1、sessionStorage检测!!window.sessionStorage;常用方法.key = value .setItem(key,value...
HTML5的Web SQL Databases（html5 本地数据库）的确很诱惑人，当你发现可以用与mysql查询一样的查询语句来操作本地数据库时，你会发现这东西挺有趣的。今天，我们一起来了解HTML 5的Web SQL Database API:openDatabase、transaction、executeSql。 Web SQL数据库API实际上不是HTML5规范的组成部分，而是单独的规范。它通过一套API来操纵客户端的数据库。Safari、Chrome、Firefox、Opera等主流浏览器都已经支持Web SQL Database。HT...
HTML5 web 存储,一个比cookie更好的本地存储方式。什么是 HTML5 Web 存储?使用HTML5可以在本地存储用户的浏览数据。早些时候,本地存储使用的是cookies。但是Web 存储需要更加的安全与快速. 这些数据不会被保存在服务器上，但是这些数据只用于用户请求网站数据上.它也可以存储大量的数据，而不影响网站的性能.数据以 键/值 对存在, web网页的数据只允许该网页访问使用。浏览器支持Internet Explorer 8+, Firefox, Opera, Chrome, 和...
一年多前见过一个多人聊天室应用，是张丹老师写的一个 socket.io 教程 （原链接点不开，贴一个转帖的），觉得socket这个东西很神奇。后来研究生期间的一个项目也用到了.Net的socket，多个客户端之间的通信， 觉得很有意思，也是那一次比较全面地认识和应用了事件委托等等一些概念。最近受群里研究mapbox的热情和@扯淡大叔， @老羽 @F3earth 所有成员的帮助和启发， 突发奇想花了点时间基于mapbox gl js和socket.io做了一个 飞机大战...
<aside>元素HTML<aside>元素表示一个页面的一部分， 它的内容跟这个页面的其它内容的关联性不强，或者是没有关联，单独存在。<aside>元素通常显示成侧边栏(sidebar)或一些插入补充内容。通常用来在侧边栏显示一些定义，比如目录、索引、术语表等；也可以用来显示相关的广告宣传，作者的介绍，Web应用，相关链接，当前页内容简介等。<aside>元素使用注意事项： 不要使用<aside>元素标记括号中的文字，因为这种类型的文本被认为是...
一、简介我们要做的是怎样一款游戏？在前不久成都TGC2016展会上，我们开发了一款《火影忍者手游》的体感游戏，主要模拟手游章节《九尾袭来 》，用户化身四代，与九尾进行对决，吸引了大量玩家参与。 表面上看，这款游戏与其它体感体验无异，实际上，它一直运行于浏览器Chrome下，也就是说，我们只需要掌握前端相应技术，就可以开发基于Kinect的网页体感游戏。二、实现原理实现思路是什么？使用H5开发基于Kinect的体感游戏，其实工作...