投稿赚佣金 
升级SVIP
html5 Canvas画图教程(11)—使用lineTo/arc/bezierCurveTo画椭圆
在canvas中可以很方便的用arc方法画出圆形，本来圆形也可以看作是一个宽高相等的椭圆，但canvas中根本没有画椭圆的方法，我们要用其他方法来模拟。 我们首先要明确画一个椭圆需要那些参数，基本的几何知识告诉我们，椭圆需要圆心坐标，宽度，
html5 svg 中元素点击事件添加方法
最近在用svg的点击事件做东西，之所以用svg而不用canvas就是因为svg内的元素可以添加点击事件，他们之间详细的区别如下： Canvas 与 SVG 的比较（详见） 下表列出了 canvas 与 SVG 之间的一些不同之处。 Canv
HTML5中Canvas与SVG的画图原理比较
canvas 与 SVG都能够使你在浏览器中画图，但它们的基本原理不同。 SVG SVG是一种在XML中描述二维图形的语言。 SVG是基于XML的，意味着在SVG DOM内每一个元素都是可用的。你可以为每一个元素增加JS事件处理器。 在SV
Html5游戏开发之乒乓Ping Pong游戏示例(一)
在这一章节我们将：准备开发工具建立我们的第一个游戏-Ping Pong学习使用Jquery JavaScript库做基本定位获取键盘输入Creating the Ping Pong game with scoring下面的游戏截图就是我们本
Html5游戏开发之乒乓Ping Pong游戏示例(二)
Headerandfooter Html5引进了许多新的特性和改进，其中一项就是语义。Html5增加了新的元素来加强语义。我们现在只使用2个，header和footer。标签定义文档的页眉（介绍信息），标签定
Html5游戏开发之乒乓Ping Pong游戏示例(三)
jQuery 介绍 【这部分就不翻了，网上有很多的。如果有不懂的部分找度娘】 用jQuery操作游戏元素 我们已经用jQuery初始化了球拍。现在我们做一个如何使用jQuery安置游戏元素的实验。 动起来-使用jQuery修改元素的位置 让
利用HTML5中Geolocation获取地理位置调用Google Map API在Google
本小菜刚开始学习HTML5，现在对其中的Geolocation颇感兴趣，结合Google Map的API实现基本的地图定位功能。 1.获取当前地理位置 调用方法 void getCurrentPosition(onSuccess, onEr
利用html5 canvas破解简单验证码及getImageData接口应用
敝校的教务管理系统（貌似不止我们学校用呢），一到选课时间服务器各种崩不解释，有时为了选个课就要反复输入验证码，一想到千千万万的大学生把时间浪费在输入验证码上面，我就觉得，我有义务拯救一下人类。 搜了一下，看到这篇文章，3年前的文章了。我参考
HTML5之SVG 2D入门4—笔画与填充
前面我们重点都在总结各类形状，文本和图片，接下来，我们还是和讨论canvas一样，总结一下颜色处理，也就是填充和边框效果；你会发现这里的内容与canvas基本上是一致的。这些属性既可以以属性的形式写在元素中，也可以以CSS的形式保存(这是与
HTML5之SVG 2D入门8—文档结构及相关元素总结
前面介绍了很多的基本元素，包括结构相关的组合和重用元素，这里先对SVG的文档结构中剩下的相关元素简单总结一下，然后继续向前领略SVG的其他特性。 SVG文档的元素基本可以分为以下几类： •动画元素：animate,animateC
HTML5之SVG 2D入门9—蒙板及mask元素介绍与应用
SVG支持的蒙板SVG支持多种蒙板特效，使用这些特性，我们可以做出很多很炫的效果。至于中文中把mask叫做"蒙板"还是"遮罩"就不去区分了，这里都叫做蒙板吧。SVG支持的蒙板类型： 1. 裁剪路径(cliping path)裁剪路径是由pa
HTML5之SVG 2D入门11—用户交互性(动画)介绍及应用
交互性 SVG拥有良好的用户交互性，例如： 1. SVG能响应大部分的DOM2事件。 2. SVG能通过cursor良好的捕捉用户鼠标的移动。 3. 用户可以很方便的通过设置svg元素的zoomAndPan属性的值来实现缩放等效果。 4.
HTML5之SVG 2D入门12—SVG DOM及DOM操作介绍
使用脚本可以很方便的完成各种复杂的任务，也是完成动画和交互的一种主流方式。由于SVG是html的元素，所以支持普通的DOM操作，又由于SVG本质上是xml文档，所以也有一种特殊的DOM操作，大多称之为SVG DOM。当然了，由于目前IE不支
HTML5之SVG 2D入门13—svg对决canvas及长处和适用场景分析
到目前为止，SVG与Canvas的主要特性均已经总结完毕了。它们都是HTML5中支持的2D图形展示技术，而且均支持向量图形。现在，我们就来比对一下这两种技术，分析一下它们的长处和适用场景。首先分析一下两种技术的显著特点，看下面的表格：Can
突袭HTML5之Javascript API扩展1—Web Worker异步执行及相关概述
Javascript执行机制 在HTML5之前，浏览器中JavaScript的运行都是以单线程的方式工作的，虽然有多种方式实现了对多线程的模拟（例如：Javascript 中的 setinterval 方法，setTimeout 方法等），
突袭HTML5之Javascript API扩展2—地理信息服务及地理位置API学
现在比较火的一类服务叫做基于位置的服务(location-based service， LBS)，这一类服务就是企业利用某点(例如用户所在的位置)坐标附近的区域提供服务的信息，比如常见的地图相关服务。在HTML5中，加入了新的地理位置API
突袭HTML5之Javascript API扩展3—本地存储全新体验
为什么要存数据到客户端？ 存储数据在客户端可以解决很多的问题和减少不必要的传输数据： 1. 能保存程序的状态：用户关闭浏览器再打开后能知道他工作到哪了。 2. 能缓存数据：很多不会变化的数据根本没必要每次都从服务端获取。 3. 能保存用户的
突袭HTML5之Javascript API扩展4—拖拽(Drag/Drop)概述
拖拽(Drag/Drop)是个非常普遍的功能。你可以抓住一个对象，并且拖动到你想放置的区域。很多javascript都类似实现了相关的功能，例如，jQueryUI的draganddrop组件。在HTML5中，拖拽(draganddrop)成
突袭HTML5之Javascript API扩展5—其他扩展(应用缓存/服务端消息
前面已经总结了主要的API扩展，下面几个扩展只有在专用的场合才会发挥最大的作用，这里简单了解一下。下面这些特性无一例外，IE均不支持。应用缓存和服务端消息在其他的主流浏览器中都是支持的。桌面通知目前只有Chrome支持。 应用缓存 很多时候
HTML5之HTML元素扩展(上)—新增加的元素及使用概述
考虑我们开发一个页面的过程：1.设计页面的结构 - HTML：这个过程是使用各种HTML元素构建网页的结构。2.设计页面的外观 - CSS：这个过程是使用CSS去改善网页的外观。3.设计页面的行为 - Javascript：这个过程是给网页
