Web Storage是HTML5引入的一个非常重要的功能，可以在客户端本地存储数据，类似HTML4的cookie，但可实现功能要比cookie强大的多，cookie大小被限制在4KB，Web Storage官方建议为每个网站5MB。 Web Storage又分为两种： sessionStorage localStorage 从字面意思就可以很清楚的看出来，sessionStorage将数据保存在session中，浏览器关闭也就没了；而localStorage则一直将数据保存在客户端本地； 不管是sessionStorage，还是localStor...
概述 HTML5中的Canvas并没有直接提供绘制椭圆的方法，下面是对几种绘制方法的总结。各种方法各有优缺，视情况选用。各方法的参数相同： context为Canvas的2D绘图环境对象， x为椭圆中心横坐标， y为椭圆中心纵坐标， a为椭圆横半轴长， b为椭圆纵半轴长。 参数方程法 该方法利用椭圆的参数方程来绘制椭圆 代码如下: //-----------用参数方程绘制椭圆--------------------- //函数的参数x,y为椭圆中心；a,b分别为椭圆横半轴、 //纵半...
在上一篇《HTML5本地存储之Web Storage篇》中，简单介绍了如何利用localStorage实现本地存储；实际上，除了sessionStorage和localStorage外，HTML5还支持通过本地数据库进行本地数据存储，HTML5采用的是"SQLLite"这种文件型数据库，该数据库多集中在嵌入式设备上，熟悉IOS/Android开发的同学，应该对SQLLite数据库比较熟悉。 HTML5中的数据库操作比较简单，主要有如下两个函数： 1、通过openDatabase方法创建一个访问数据库的对象 ...
今天我们要用canvas制作一个猜字母的小游戏，先来张效果图。 游戏设计很简单，系统会随机从a-z的26个字母中选择一个保存起来，你键盘输入一个字母，系统会提示你正确字符比你当前输入字母小还是大，直到你输入正确的字母游戏才结束。 下面介绍js代码中需要用到的一些变量及其他们的含义，系统会在开始的时候初始化这些变量。 guesses：用户猜字母的次数； message：帮助玩家如何玩游戏的说明； letters：保存26个英文字母的数组；...
当我编码Elemin Theme（我最近设计的一个响应式的站点）的时候，我遇到的一个跳帧就是，如何能让嵌入式的视频在尺寸变化上变得更加灵活。使用max-width:100% 和height:auto可以让html5的video标签很好的工作，但是这个解决方案不适用于iframe 或者 object标签的内嵌代码。通过几小时的寻找资料和实验，我最终找到了解决办法。当你在进行响应式设计的时候，这一css技巧能派上用场。 灵活的html5 video标签 使用html5的video，可以通...
HTML5将重塑Web世界？2010年上半年的一个焦点事件，引起了很多人的关注，其中有不少人因这一事件第一次了解到HTML5的存在。初次了解HTML5的人可能会非常惊讶，HTML5规范早在6年前就开始制定了，如今尽管HTML5规范草案已经非常好，但何时能真正成为标准却仍然不确定。的确，HTML5规范制定委员会工作进展非常缓慢。因为关于如何改进浏览器和改进Web世界，不管是浏览器供应商还是其他人都有太多的想法，而这些都要汇聚到HTML5规范中并...
前言 一个触屏网站到底和传统的pc端网站有什么区别呢，交互方式的改变首当其冲。例如我们常用的click事件，在触屏设备下是如此无力。 手机上的大部分交互都是通过touch来实现的，于是，对于触屏的交互式网站，触摸事件是相当重要的。 Apple在iOS 2.0中引入了触摸事件API，Android正迎头赶上这一事实标准，缩小差距。最近一个W3C工作组正合力制定这一触摸事件规范。 规范 这里我们介绍几种普及得比较好的触摸事件，你可以在绝大多数...
判断浏览器是否支持canvas，具体代码如下： 代码如下: canvas window.onload = function(){ /**判断浏览器是否支持canvas**/ try{ document.createElement('canvas').getContext('2d'); var addDiv = document.createElement('div'); addDiv.innerHTML='支持canvas'; document.body.appendChild(addDiv); }catch(e){ var addDiv = document.createElement('div'); addDiv.innerHTML='浏览器不支持canvas'; document.body.appen...
在今天的课程中，我将向大家介绍如何使用css3创建3d的立方体。大家可以通过下面的链接浏览实际效果，操作上下左右键，实现立方体的翻转效果。 demo地址：http://www.gxlcms.com/jiaoben/70022.html 下面我们开始介绍如何制作。 html： 代码如下: One face Up, down, left, right Lorem ipsum. New forms of navigation are fun. Rotating 3D cube More content 上面的html中，class为face的6个div分别代表立方体的...
从今天开始，我们将开始一个关于html5 canvas的系列课程。这个系列是我读《HTML5 Canvas：Native Interactivity and Animation for the Web》后的总结，有兴趣的朋友可以去下载英文原版书籍阅读。这本书通过介绍canvas游戏开发的方式，向我们展现canvas强大的功能，我觉得相当不错，通过阅读这本书我学到了canvas很多的知识。其实canvas本身的api并不多，关键是活学活用，学会对api的组合使用制作出令人难以置信的效果。而这本书就...
前面的文章我已经讲了3种在canvas中画曲线的方法：arc,arcTo以及quadraticCurveTo.他们都有一个共同点，就是他们画的曲线都只能偏向一边，今天讲的bezierCurveTo与他们最大的不同点就是有两个控制点，即可以画出S形的曲线了。 bezierCurveTo，也就是所谓的贝赛尔曲线了，如果你学过某些画图工具，就能马上理解。 bezierCurveTo的语法如下： ctx.bezierCurveTo(x1,y1,x2,y2,x,y);他的参数我照例解释一下，其中的（x1,y1）即控制点1的...
在Web开发中，我们要实现拖放效果，需要借助Javascript。今天让我们使用Html5实现它： 先看html核心代码: 代码如下: 把黄色小方块拖入到红色大方框中 draggable属性是html5新增加的，它有三个值true,false,auto. true是可以拖，false是不可以，auto由用户浏览器是否支持而定。更多请可以参考官方文档. 加上一点儿样式: 代码如下: #drop { width: 300px; height: 200px; background-color: #ff0000; padding: 5px; border: 2...
敝校的教务管理系统（貌似不止我们学校用呢），一到选课时间服务器各种崩不解释，有时为了选个课就要反复输入验证码，一想到千千万万的大学生把时间浪费在输入验证码上面，我就觉得，我有义务拯救一下人类。 搜了一下，看到这篇文章，3年前的文章了。我参考了前半部分，借助TamperMonkey这个插件，大概实现了想要的效果。可以在Userscript获取这个脚本，GitHub上面也有，代码写得丑，求debug，求指教。 说下思路：HTML 5中的canvas...
滤镜称得上是SVG最强大的功能了，它允许你给图形(图形元素和容器元素)添加各种专业软件中才有的滤镜特效。这样你就很容易在客户端生成和修改图像了。而且滤镜并没有破坏原有文档的结构，所以维护性也很好。滤镜用filter元素定义：需要使用的时候，在需要滤镜效果的图形或容器上添加filter属性，引用相关滤镜即可。滤镜元素包含很多的滤镜原子操作；每个原子操作在传入的对象上执行一个基本的图形操作，并产生图形输出。大多数的原子...
暂不支持chrom 。支持safari .其他未测试 先引用 jquery 地址。选用新浪的 代码如下: 加一个video标签 代码如下: 然后js 代码如下: $().ready(function(){ var video, output; var scale = 0.25; var initialize = function() { output = $("#output"); video = $("#video").get(0); $("#capture").click(captureImage); }; var captureImage = function() { var canvas = document.createElement("canvas"); canvas.width = ...