提高 HTML5 画布性能
HTML5 画布最初来自 Apple 的一项实验，是网络上最广泛支持的 2D 直接模式图形标准。现在，许多开发人员都依靠 HTML5 画布开发各种多媒体项目、视觉效果和游戏。但是，随着我们构建的应用的复杂程度不断增加，开发人员会在无意中遇到性能限制。 有关优化画布性能的知识有很多，但并不系统。本文旨在将其中的部分文章整合到更易于开发人员理解的资源中。本文包含适用于所有计算机图形环境和画布专用技术（…
什么是 HTML 5 Canvas？
他是个 API，可以方便地在浏览器中做图像操作，比如绘制、动画、渐变、形状等效果。可以与现实中的画布画笔类比。 它有一个坐标系。与一般的笛卡儿平面直角坐标系有所不同。我们通过 <canvas> 标签可以创建一个画布，而画笔则是通过 canvas.getContext('2d') 拿到。有了画笔，我们才可以在画布上面画东西嘛。 Why's this 么有它之前前端是怎么画图的？用什么工具…
下一代网络布局：National Geographic Forest Giant
使用 CSS 和浏览器布局中的工具可以实现令人惊叹的 Web 内容可视化。 使用 CSS 过滤器、WebGL、HTML5 视频、SVG、Canvas 画布等 Web 功能以及 CSS 区域、CSS 形状和 CSS 自定义过滤器等不断发展的未来技术，可以极大地扩展创意领域。 Adobe 长期以来一直与热衷于布局和设计的内容创建者合作，因此一直积极地将这些知识应用于网络，并为许多不断发展的网络标准做出…
利用 HTML5 美化表单
对表单感兴趣的人并不多，但 HTML5 引入的一些重大改进却同时方便了创建表单的开发人员和填写表单的用户。全新的表单元素、属性、输入类型、基于浏览器的验证、CSS3 样式技术以及 FormData 对象让创建表单变得更轻松，甚至可能更富有趣味性。 浏览器支持 在撰写本文时，所有新的表单和输入元素以及属性和类型的支持情况都会因浏览器的不同而存在很大差异。甚至在支持特定功能的各个浏览器之间，它们的行为…
案例研究：Google I/O 2013 实验
为了在会议注册开始前建立开发者对 Google I/O 2013 网站的兴趣，我们开发了一系列移动优先的实验和游戏，重点关注触摸交互、生成音频和发现的乐趣。 受到代码潜力和游戏力量的启发，当您点击新的 I/O 标志时，这种互动体验从 I 和 O 的简单声音开始。 有机运动 我们决定以一种在 HTML5 交互中不常见的不稳定有机效果来实现 I 和 O 动画。 拨入选项以使其变得有趣和被动需要一点时间…
使用 Chrome DevTools 分析移动 HTML5 应用程序
今天，您可以为您的网站做的最重要的事情就是确保它从手机或平板电脑访问时表现良好。 继续阅读并了解如何使用 Chrome DevTools 和一个针对移动浏览器优化您的网站安卓设备。 为什么要针对移动 Web 进行优化很重要？ 表现 移动设备正在获得更快的 CPU、更多的 RAM、更快的 GPU 和更快的速度我们从 2G 和 3G 过渡到 4G 时的网络访问。 尽管鼓点与我们相比，移动设备的动力不足…
案例研究：SONAR HTML5 游戏开发
去年夏天，我担任了一款名为 SONAR 。 该项目花了大约三个月的时间完成，并且完全是用 JavaScript 从头开始完成的。 在 SONAR 的开发过程中，我们不得不在新的和未经测试的 HTML5 水域中找到许多问题的创新解决方案。 特别是，我们需要一个看似简单的问题的解决方案：当玩家开始游戏时，我们如何下载和缓存 70+ MB 的游戏数据？ 对于这个问题，其他平台有现成的解决方案。 大多…
用于优化移动性能的 HTML5 技术
旋转刷新、断断续续的页面转换和点击事件的周期性延迟只是当今移动 Web 环境中的一些令人头疼的问题。 开发人员正试图尽可能接近原生，但经常被黑客、重置和僵化的框架所破坏。 在本文中，我们将讨论创建移动 HTML5 Web 应用程序所需的最低限度。 重点是揭露当今移动框架试图隐藏的隐藏复杂性。 您将看到一种简约的方法（使用核心 HTML5 API）和基本原理，使您能够编写自己的框架或为您当前使用…
在 HTML5 中捕获音频和视频
This article discusses APIs that are not yet fully standardized and still in flux. Be cautious when using experimental APIs in your own projects. 简介 长久以来，音频/视频捕获都是网络开发中的 圣杯。多年来，我们总是依赖于浏览器插件（Flash 或 Si…
HTML5 本地数据库介绍
html5 引入了 localStorage 来做缓存，又感觉只支持 key-value 的方式，有所局限，所以又添加了本地数据库的支持。 1、Web SQL w3c 最早提出的本地数据库方案是 Web SQL，但是现在已经停止了对其的更新，功能要点，也是 H5 Sqlite 数据库三个核心 API： 打开数据库 执行SQL语言 创建数据表 table 增加、修改、删除数据 获取数据 清空数据 事…
案例研究：一个带有网络音频的 HTML5 游戏的故事
Fieldrunners 是一款屡获殊荣的塔防风格游戏，最初发布 iPhone 于 2008 年 。此后它已被移植到许多其他平台。 最新的平台之一是 的 Chrome 浏览器 2011 年 10 月 。将 Fieldrunners 移植到 HTML5 平台的挑战之一是如何播放声音。 Fieldrunners 并没有对音效进行复杂的使用，但它确实对如何与其音效进行交互提出了一些期望。 游戏共有88种…
HTML5 之 pushstate、popstate 操作 history 无刷新改变当前 url
一、认识 window.history window.history 表示 window 对象的历史记录，是由用户主动产生，并且接受 JavaScript 脚本控制的全局对象。window 对象通过 history 对象提供对览器历史记录的访问能力。它暴露了一些非常有用的方法和属性，让你在历史记录中自由前进和后退。 1、历史记录的前进和后退 在历史记录中后退，可以这么做： window.histo…
阿里 11.11 HTML5 性能最佳实践
前言 2015年是全面『无线化』的一年，在BAT（财报）几家公司都已经超过50%的流量来自移动端，这次 双11 更是占到了68.67%无线交易 （天猫微博）。 手淘中大量的业务采用H5的方式开发，H5体验好坏全面影响着手淘的使用体验。 今年手机淘宝在技术上重点解决“顿”，“卡”，“慢”的问题，并提出了“521法则” ,具体指： App内存节省50% 绘制帧率，滑动体验提升20% App全链路实现 …
HTML5 的 a 标签的 download 属性
在 html 里创建一个是下载链接是方便的，添加一个 <a> 标签和指向文件的 href 属性就行了。但是某些文件不会被下载（比如图像，pdf，txt，doc），相反，他们会在浏览器中被打开。 如果你的站点是有服务器端的，你可以通过配置 .htaccess 文件来使得那些文件可以被下载。如果你的站点是被WordPress.com或者github页面托管的（静态页面），那么轻考虑使用 &…
- 共 6 页
- 1
