HTML5
云淡风清-北京
在战争中学习如何战斗。GitHub:https://github.com/luqin
展开
-
浅析HTML5在移动应用开发中的使用
前言HTML5的出现让移动平台的竞争由系统平台转向了浏览器之间:移动端的IE、Chrome、FireFox、Safari,亦或是新出现的浏览器,谁能达到在移动端对HTML5更好的支持,谁就能在以后的移动应用领域占据更多的市场。现在我们怎么装APP有了HTML5以后怎么装APP更灵活、更方便的app使用及安装方式将成为HTML5在移动平台上大放异彩的保障之一。下面列举原创 2012-07-11 12:46:11 · 2395 阅读 · 0 评论 -
[HTML5-SVG]基于SVG技术进行WebGIS开发浅析
SVG(ScalableVectorGraphics)是W3C组织为适应InternetWeb应用的飞速发展需要而制定的一套基于XML语言的二维可缩放矢量图形语言描述规范。传统的HTML静态页面描述语言的采用的标记固定、有限且… SVG(Scalable Vector Graphics)是W3C组织为适应InternetWeb应用的飞速发展需要而制定的一套基于XML语言的二维可缩放矢量图形原创 2013-04-17 16:26:21 · 2287 阅读 · 0 评论 -
[HTML5-SVG]Html5的可缩放矢量图形实例SVG
可缩放矢量图形(Scalable Vector Graphics,SVG)是基于可扩展标记语言(XML),用于描述二维矢量图形的一种图形格式。SVG由W3C制定,是一个开放标准。SVG严格遵从XML语法,并用文本格式的描述性语言来描述图像内容,因此是一种和图像分辨率无关的矢量图形格式。SVG格式具有以下优点:1) 图像文件可读,易于修改和编辑2) 与现有技术可以互动融合。例如:SVG技原创 2013-04-17 16:28:32 · 6884 阅读 · 0 评论 -
[HTML5-Canvas] HTML5 canvas 新手入门教程
目录简述canvas 基础2D context API基本线条路径插入图像像素级操作文字阴影颜色渐变小节简述HTML5 规范引进了很多新特性,其中最令人期待的之一就是 canvas 元素。HTML 5 canvas 提供了通过 JavaScript 绘制图形的方法,此方法使用简单但功能强大。每一个 canvas 元素都有一个"上下文( con原创 2013-04-17 16:33:54 · 4666 阅读 · 0 评论 -
[HTML5-Canvas] 使用HTML5 canvas完成的一个网页白板
该代码能够使用canvas对象完成的一个基本功能。仅供大家参考。 Title var ball; var mouseX = 100; var mouseY = 100; var angle = 0; var radius = 0; var ballstyle = "." var ballcol原创 2013-04-17 16:35:36 · 6073 阅读 · 0 评论 -
[HTML5-Canvas] HTML5 <canvas> 标签
定义和用法 标签定义图形,比如图表和其他图像。实例如何通过 canvas 元素来显示一个红色的矩形:var canvas=document.getElementById('myCanvas');var ctx=canvas.getContext('2d');ctx.fillStyle='#FF0000';ctx.fillRect(0,0,80,100);原创 2013-04-17 16:43:08 · 1105 阅读 · 1 评论 -
[HTML5-SVG,VML,CANVAS]Web开发中的矢量绘图(vml,svg)处理和应用
前言1991 年物理学家 Tim Berners-Lee 首次在因特网上发布了 HTML 的第一版描述规范文档。经过了 20 多年的发展,HTML 语言成为如今编程最为广泛的语言和互联网上采用最广的文档格式。虽然 HTML 发展十分迅速并具有诸多优点,但其始终不能提供一个良好的矢量绘图解决方案。很多应用为获得绚丽的动画和绘图效果,不得已在页面中嵌入大量的 Flash。这不仅降低了页面元原创 2013-04-17 16:02:10 · 6791 阅读 · 2 评论 -
[HTML5-SVG]使用raphaeljs:代替css3绘制opera图标效果
之前的文章:css3绘制opera图形+倒影,用css3实现兼容性并不好,opera,ie均不支持渐变。上次使用svg代替css3实现qq空间关闭按钮旋转特效,发现svg用来绘图是个不错的选择,结合raphael库实现浏览器的兼容,不支持svg的浏览器会换成vml绘制。这次用这个方案来绘制opera的图形同样实现了所有浏览器的兼容。点击观看演示 实现方法如下,首先导入raphael库原创 2013-04-17 16:13:25 · 1845 阅读 · 0 评论 -
[HTML5-SVG]使用raphaeljs:绘制哆啦A梦并实现动画效果
网上有人用css3实现哆啦A梦,我给他多加了个竹蜻蜓的动画,点击观看演示,兼容性并不好,只有webkit支持动画,ie下就是一堆方块。所以我想用svg技术来实现所有浏览器的兼容。先来看下演示,目前知道的是ie6,7不支持动画,但是绘图还是没有问题的,ie6,7点击观看演示 最近对svg有些研究,先是使用svg代替css3实现qq空间关闭按钮旋转特效,然后是使用svg代替css3绘制oper原创 2013-04-17 16:15:43 · 4831 阅读 · 0 评论 -
[HTML5-SVG]使用svg代替css3实现渐变
ie9不支持渐变,但是支持border-radius和box-shadow,所以在之前的小博客我都是用纯色代替渐变但是有没有办法让ie9也支持渐变,也许大多数人会想到滤镜,但是滤镜会消耗性能,而且圆角会没有效果,所以不推荐使用。有没有比css3更合适的方案呢?先看看各浏览器对css3的支持情况浏览器Radial CSSLinear CSSFirefo原创 2013-04-17 16:23:28 · 3716 阅读 · 0 评论 -
[HTML5-SVG]SVG是什么?SVG有什么用途?
一、SVG技术背景 随着网络上信息数据的大量涌现,如何正确显示和出版是有效传输、接收和利用它们的基础。图形、图像是信息数据可视化的主要方式。但现有的图形、图像格式存在着缺陷:非开放式,显示和印刷质量及适应性差,难以创建Web上图文信息的个性化定制、交互式以及实时动态方面的应用等。SVG正是在这样的背景下诞生的。SVG(Scalable Vector Graphics,可伸缩性矢量原创 2013-04-17 16:29:53 · 8693 阅读 · 0 评论 -
[HTML5-SVG]使用svg、CSS3、raphaeljs:模拟月球绕地球,地球绕太阳旋转
今天在opera中国看了一篇关于svg的动画实现,其中有一个示例是模拟月球绕地球,地球绕太阳旋转,点击观看演示。兼容性还不错,最新的主流浏览器都支持。想起了之前我有用css3实现类似的效果,点击观看演示。但是只有webkit内核的浏览器支持,因为用到了css3的animate。 要实现ie6,7,8的兼容就得用vml模拟,这时借助raphaeljs是个很好的选择。虽然效果实现了,但是只能旋转一原创 2013-04-17 16:21:24 · 4954 阅读 · 1 评论 -
[HTML5-SVG]利用 SVG 在 Web 应用程序中创建客户端图表交互
本文给出一个具体的 Web 页面,Web 开发人员及其管理者都将会对它感兴趣。尽管代码编写理解起来足够简单,但是它建模了一个超出传统的基于表单的 Web 应用程序的 GUI 效果。此效果:只依赖于公共标准。执行起来至少跟专有备选方案一样好。开启了全新的团队合作和协作模型。给出一种以前肯定没有明确地做过文档化的实现技术。本文有以下三个目标:从用户角度演示一个特定的标准兼容的基于原创 2013-04-17 15:59:42 · 2571 阅读 · 0 评论 -
HTML5本地存储不完全指南
编辑推荐:这篇文章来自于黑客志,对HTML5的本次存储方式进行了非常全面的介绍和分析,对于学习HTML5的开发者来说,不容错过哦。历史在HTML5本地存储之前,如果我们想在客户端保存持久化数据,有这么几个选择:HTTP cookie。HTTP cookie的缺点很明显,最多只能存储4KB的数据,每个HTTP请求都会被传送回服务器,明文传输(除非你使用SSL)。IE us原创 2012-07-11 11:44:26 · 699 阅读 · 0 评论 -
用HTML5创建超酷图像灰度渐变效果
原文:http://www.webdesignerwall.com/tutorials/html5-grayscale-image-hover/ 曾几何时,网站上显示的灰度图像必须手动进行转换。现在使用HTML5画布,图像可以被巧妙的转换为灰色,而不必使用图像编辑软件。我下面有一个示例,展示如何使用HTML5和jQuery动态的将彩色图像转换为灰色。贡献者:感谢达西·克拉克(我在T原创 2012-07-09 15:26:58 · 1943 阅读 · 0 评论 -
开源中最好的Web开发的资源
文章来源:Best “must know” open sources to build the new Web。个人感觉这个收集贴收集成相当的全。学习HTML 5编程和设计★ HTML5 Rocks : Major Feature Groups 的学习 HTML5 的资源 (HTML5 演示, 教程 ).源码很不错的 HTML5 Dashboard – Mozilla,效果翻译 2012-09-28 17:57:29 · 2741 阅读 · 0 评论 -
HTML5实现的多边形球体自转效果源码
body { background-color: #ffffff; margin: 0; overflow: hidden; } // workaround for chrome bug: http://code.google.com/p/chromium/issues/detail?id=35980#c12原创 2012-09-19 14:27:55 · 4485 阅读 · 1 评论 -
HTML5 入门文章目录汇总
HTML5 入门文章暂时告一段落,把文章的链接贴出来,方便大家的查阅。这些文章在每节的后面都配有完整的实例源代码,是入门的经典教程 HTML5历史与开发介绍-HTML5 入门教程HTML 5是近十年来Web开发标准最巨大的飞跃。和以前的版本不同,HTML 5并非仅仅用来表示Web内容,它的新使命是将Web带入一个成熟的应用平台,在HTML 5平台上,视频,音频,图象,动画,原创 2013-01-16 17:48:17 · 1578 阅读 · 0 评论 -
国内HTML5前端开发框架汇总
国外很有多优秀的HTML5前端开发框架相信大家都耳熟能详:JQuery Mobile,Twitter Bootstrap, Schena Touch, BackBone等等。同样,也存在很多国内比较优秀的前端开发框架,其中中国互联网三巨头贡献了近一半:腾讯,阿里巴巴,百度。框架不是万能的,选择和项目匹配的框架可以显著提高开发效率,但是也有可能带来代码的臃肿,本着“write less,转载 2013-04-03 09:35:05 · 1034 阅读 · 0 评论 -
通过(Node Js||.Net)基于HTML5的WebSocket实现实时视频文字传输(上)
HTML5 拥有许多引人注目的新特性,如 Canvas、本地存储、多媒体编程接口、WebSocket 等等。虽然现在大家把它捧的很火的样子,但是个人认为它还需要其他平台的支持才能真正的"火起来"。原来做web通信的时候 基于ajax的“轮询” “长轮询”等其他的方式 网上有很详细的解释轮询:这是最早的一种实现实时 Web 应用的方案。客户端以一定的时间间隔向服务端发出请求,以频繁请求的原创 2012-07-16 09:27:32 · 12373 阅读 · 5 评论 -
[HTML5-SVG]使用raphaeljs:代替css3实现qq空间关闭按钮旋转特效
之前写过一篇文章:css3实现qq空间相册关闭按钮转圈动画,用css3实现非常简单,但是兼容性不好,只有chrome,safari5,opera11,firefox4以上才能支持,目前firefox正式版是3.6,还不支持这个效果。今天研究了一下svg,svg主要是用来绘制矢量图形,找到一个很好的解决方案,可以解决所有浏览器的兼容。点击观看演示 首先需要载入javascript库然后编原创 2013-04-17 16:10:15 · 3573 阅读 · 0 评论 -
[HTML5-Canvas] HTML 5的<canvas>元素教程和实例
在HTML5一览中,我们提到html 5被冠以很多高帽,其中最高的一顶、备受争议的就是”Flash杀手“。IT评论界老喜欢用这个词了,杀手无处不在。不管是不是杀手,HTML 5引进的一些新特性确实让人兴奋不已。最令人期待的之一就是canvas元素。作为HTML5标准的一部分,Canvas元素允许脚本动态渲染点阵图像。这个 HTML 元素是为了客户端矢量图形而设计的。它自己没有行原创 2013-04-17 16:44:05 · 1163 阅读 · 0 评论 -
[HTML5-SVG]JavaScript 的新领域 - 动态图片处理(SVG)
背景当 JavaScript 被 Netscape 公司发明出来时,它被用来做一些琐细的事情,比如校验表单、计算日期、提示用户;随着 Web 的迅速发展,这种轻巧而灵活的语言被委以越来越多的任务,动态地修改页面内容,一致地处理事件,甚至无刷新地和服务器交互。然而,与传统的客户端编程相比,JavaScript 操作的对象限制在 DOM 模型之内,无法进行图形编程。所以长久以来,我们在设计网页原创 2013-04-17 15:56:07 · 7466 阅读 · 2 评论 -
[HTML5-Canvas] 关于HTML 5 canvas 的基础教程
canvas 元素都有一个上下文…HTML 5 规范引进了很多新特性,其中最令人期待的之一就是canvas 元素。HTML 5 canvas 提供了通过JavaScript 绘制图形的方法,此方法使用简单但功能强大。每一个canvas 元素都有一个”上下文( context )” (想象成绘图板上的一页),在其中可以绘制任意图形。浏览器支持多个 canvas 上原创 2013-04-17 16:40:35 · 1408 阅读 · 1 评论