一、简介 html5为window.navigator提供了geolocation属性，用于获取基于浏览器的当前用户地理位置。 window.navigator.geolocation提供了3个方法分别是： void getCurrentPosition(onSuccess,onError,options); //获取用户当前位置int watchCurrentPosition(onSuccess,onError,options); //持续获取当前用户位置void clearWatch(watchId); //watchId 为watchCurrentPosition返回的值 //取消监控options = {enableHi...
http://www.gxlcms.com/code/6082.html" target="_blank">HTML5介绍HTML5是继HTML4以后的下一代HTML标准规范，它提供了一些新的元素和属性。新型的标签有利于搜索引擎和语义分析，同时更好地帮助小屏幕装置和视障人士使用，除此之外，也提供了一些新的功能，总结而言，有如下几大特点：1、取消了一些HTML4里过时的元素和属性标记其中包括纯粹显示效果的标记，如<font>和<center>，它们已经被CSS取代。HTML5吸取了XHTML2的一些建议，...
此篇文章主要实现两个功能：1、点击屏幕下方签到悬浮按钮；2、弹出幸运大转盘，转盘抽奖签到鉴于初入前端之路，方法有限，仅供参考。在网上找了很多移动端拖拽的js实现方式，大部分都是这一种，html5的touch事件，但是没找到点击按钮可以向两边贴边的拖拽，所以汇总网上查阅到的相关资料自己稍微修改了一点。代码如下：$(function(){//签到按钮拖拽 //首先，设置cookie值，使到不同的页面刷新拖拽的按钮位置不会变 function setCoo...
本篇主要讲html5 canvas中剪切区域（clip region）、分层、合成(compositing)、变换(Transformation)（旋转、缩放）功能如何应用。先贴一个以下所有涉及到的实现运行的基本代码段： Base Code<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <script type="text/javascript" src="modernizr-latest.js"></script> <script type="text/javascript"> window.addEventListener("load", eventWindowLoa...
1、概述Mutation Observer（变动观察器）是监视DOM变动的接口。当DOM对象树发生任何变动时，Mutation Observer会得到通知。要概念上，它很接近事件。可以理解为，当DOM发生变动会触发Mutation Observer事件。但是，它与事件有一个本质不同：事件是同步触发，也就是说DOM发生变动立刻会触发相应的事件；Mutation Observer则是异步触发，DOM发生变动以后，并不会马上触发，而是要等到当前所有DOM操作都结束后才触发。这样设计是为了应...
本篇主要讲，html5 canvas中图形的填充（filling）功能应用，主要包括基本颜色定义（Basic Colors）、渐变（Gradient）、图案（Pattern）、阴影（Shadow）；先贴一个以下所有涉及到的实现运行的基本代码段： Base Code<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <script type="text/javascript" src="modernizr-latest.js"></script> <script type="text/javascript"> window.addEventListener("load", eventWindowL...
先来介绍下 media，确切的说应该是 CSS media queries（CSS http://www.gxlcms.com/css/css-rwd-mediaqueries.html" target="_blank">媒体查询），媒体查询包含了一个媒体类型和至少一个使用如宽度、高度和颜色等媒体属性来限制样式表范围的表达式。CSS3 加入的媒体查询使得无需修改内容便可以使样式应用于某些特定的设备范围。 那么该怎么定义 media 呢，看下面的代码，你肯定能猜出个大概。<!-- link元素中的CSS媒体查询 --> <li...
Canvas所支持的Image API是非常强大的;我们可以直接加载图像，将其显示在Canvas上,也可以切割和拼接显示所需的任何图像部分;此外，Canvas给我们提供的存储其像素数据的功能，我们可以通过操纵像素数据，然后重新绘制到Canvas上。虽然Canvas只有提供少数的Image API函数，但它开辟一个像素级别操纵的世界；它使开发人员可直接在Web浏览器中创建优化的应用程序，而无需任何插件。Canvas Api允许访问DOM定义的Image对象:<img></img>, ...
今天和大家分享的是 3D 系列之 3D 预定义模型。HT for Web 提供了多种基础类型供用户建模使用，不同于传统的 3D 建模方式，HT 的建模核心都是基于 API 的接口方式，通过 HT 预定义的图元类型和参数接口，进行设置达到三维模型的构建。接下来我们就来谈谈预定义的 3D 模型及参数设置。HT 预定义的 3D 模型有：box、sphere、cone、torus、cylinder、star、rect、roundRect、triangle、tightTriangle、parallelogram 和 trapezoid 这十...
上一篇，主要讲了canvas提供的基本的Image API；本篇我们使用canvas提供的Image Api及变换，来实现一些实例：小车的简单运动、简单游戏地图、图像的平移缩放；以下应用中使用到的图片：图片1：tanks--[32*32]*8--tanks.png图片2：map--[32*32]*4--map.png 我们在Canvas上(50,50)的位置上显示tanks的前1/8部分(第一个tank)，如何做呢？我们用part of image api;context.drawImage(tanks,0,0,32,32,50,50,32,32);如果要使当前的tan...
JSZip 是一款可以创建、读取、修改 .zip 文件的 javaScript 工具。在 web 应用中，免不了需要从 web 服务器中获取资源，如果可以将所有的资源都合并到一个 .zip 文件中，这时候只需要做一次请求，这样既减少了服务器的压力，同时也可以加快 web 应用的呈现速度。今天就来探讨下 JSZip 如何与 HT 应用结合。先来看看这期 Demo 的效果图： 第一步、需要将应用对相关资源打包成 .zip 文件，这是我要压缩的文件列表，把响应的资源文件...
font</a>-family: comic sans ms,sans-ser<a href=">html5 canvas中支持对text文本进行渲染;直接的理解就是把text绘制在画布上，并像图形一样处理它（可以加shadow、gradient、pattern、color fill等等）；既然它的本质是文字，就会具有文字所特有的一些属性；本篇的侧重点也在于此；不过，在最后会增加一些图形填充效果在text上应用的实例；context.font:[font style] [font weight] [font size] [font face]字体属性的设置与css中...
http://www.gxlcms.com/wiki/1118.html" target="_blank">html5 Canvas 介绍canvas的基本属性与方法：width,height,getContext()等；通过width与height来获取和设置当前canvas的宽度、高度；通过getContext()方法来获取当前画布的绘图环境（context）；context=canvas.getContext("2d");context包含了我们需要的，在canvas上绘图的所有方法及属性；context的笛卡尔坐标系统中，canvas的左上角为原点；从原点往右为X轴的正向，往下为...
只有对基础二维图形的绘画（drawing）、着色(coloring)、变换（transforming）有较强基础，才能更加有效的利用Canvas；下面，我就简单了解一下，canvas是如何绘画基本shape的（矩形、直线、圆弧、贝赛尔曲线）等； 先贴一个以下所有涉及到的实现运行的基本代码段：Base code<!DOCTYPE html> <html><head><meta charset="utf-8" /><script type="text/javascript" src="modernizr-latest.js"></script><script type="text/javascrip...
在HTML5中，提供了一个关于文件操作的API，通过这个API，对于从web页面上访问本地文件系统的相关处理变得十分简单。到目前为止只有部分浏览器对它提供支持。1.FileList对象和File对象 FileList对象表示用户选择的文件列表，在HTML4中file控件内只允许放置一个文件，但在HTML5中通过添加multiple属性，file控件内允许放置多个文件。控件内的每一个用户选择的文件都是一个file对象，而FileList就是这些file对象的列表，代表用户选...