摘要：
HTML5 canvas 元素详细教程四：运用样式与颜色。在 绘制图形 的章节里，我只用到默认的线条和填充样式。而在这一章里，我们将会探讨 canvas 全部的可选项，来绘制出更加吸引人的内容。色彩 Colors到目前为止，我们只看到过绘制内容的方法。如果我们想要给图形上色，有两个重要的属性可以做到：fillStyle和strokeStyle。fillStyle= colorstrokeStyle= colorstrokeStyle是用于设置图形轮廓的颜色，而fillStyle用于设置填充颜色。color可以是表示 CSS 颜色值的字符串，渐变对象或者图案对象。我们迟些再回头探讨渐变和图案对象 阅读全文
摘要：
HTML5 Canvas 可以引入图像，用于图片合成或者制作背景等。但目前仅可以在图像中加入文字（标准说明中并没有包含绘制文字的功能）。只要是 Gecko 支持的图像（如 PNG，GIF，JPEG等）都可以引入到 canvas 中，而且其它的 canvas 元素也可以作为图像的来源。引入图像HTML5 Canvas引入图像只需要简单的两步：1、首先当然是来源图片，不是简单的 URL 路径，但可以是一个 JavaScript 的 Image 对象引用，又或者其它的 canvas 元素，2、用drawImage方法将图像插入到 canvas 中。先来看看第1步，基本上有四种可选方式：引用页面内的图 阅读全文
摘要：
HTML5架构HTML5架构，（HTML5 Boilerplates ）html5文档的快速建立html5文档非常容易建立，你只需要改变文档头部的DOCTYPE声明。复制内容到剪贴板<!DOCTYPEhtml>这样你就已经建立好一个HTML5文档了，看看谷歌首页是怎么做的吧复制内容到剪贴板<!doctypehtml><head><title>HTML5-GoogleSearch</title><script>..但是谷歌的验证和搜索结果页面都没有使用，因为那些页面还存在很多无效标签，如<font>等，但是没关系 阅读全文
摘要：
HTML5 canvas 元素详细教程一：基本用法。<canvas>是Html5中一个全新的元素，它可以被JavaScript语言用来绘制图形。最先<canvas>是在苹果公司的Mac OS X Dashboard上被引入，他被应用于Safari，而后基于Gecko1.8的浏览器，也支持这个新的元素，例如Firefox浏览器。如今，<canvas>元素已是HTML5标准规范的一部分。<canvas>能做什么，我们都将通过本教程向大家讲解，并且可以作为你应用<canvas>的起点。学习<canvas>元素并不困难，只需要具有 阅读全文
摘要：
HTML5 canvas 元素详细教程二：绘制图形。在开始之前，我们需要对canvas 的网格（grid）或者坐标空间（coordinate space）进行探讨。在HTML5 canvas 元素详细教程一中有一个150像素宽， 150像素高的 canvas 对象的HTML模板。在画面上叠加上默认网格，如右图。通常网格的1个单元对应 canvas 上的1个像素。网格的原点是定位在左上角（坐标(0,0)）。画面里的所有物体的位置都是相对这个原点。这样，左上角的蓝色方块的位置就是距左边x像素和距上边Y像素（坐标(x, y)）。现在我们使用默认的状态来进行图形的绘制吧。矩形 Rectangles首先 阅读全文
摘要：
在这用一个简单的示例在讲解一下如何利用Web Storage来保存和读取数据。示例HTML代码如下：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Conten 阅读全文
摘要：
一、 DEMO HTML代码上一次介绍了HTML5 Web Storage存储机制，原来必须保存在服务端数据库中的内容现在可以直接保存在客户端本地了，这不仅可以减轻了服务器数据访问的负担，同时也提高了数据的访问速度。请将下面的代码复制到html文件中，我们通过示例来了解Web Storage。<!DOCTYPE HTML><html><head><meta charset="utf-8"><title>HTML5 Web Storage示例</title><script type="te 阅读全文
摘要：
解决CSS3圆角兼容所有浏览器的方法。本文提到了一种很不错的实现跨浏览器圆角的解决方案，但是说的不够全面，前端观察最近将整理更多更全面的资源给大家，敬请期待。 译：前一段时间，我经常收到一个关于如何在IE浏览器中使用CSS3的border-radius属性实现圆角HTML元素的问题。你或许知道CSS3的border-radius 属性被Safari、Firefox和Chrome等浏览器原生支持，但是由于某些原因IE并不支持它。 那么要想在IE中实现圆角，你不得不使用一些技巧，比如使用带有背景图片的CSS类。 而我知道的在各个浏览器中实现圆角的较简单快速的方案是结合CSS3和JavaSc... 阅读全文
摘要：
HTML5网页测试-未来打造出来的网页会有多强大，我不得而知。作为一个HTML5初学者，不得不感叹人类的想象力与创造力。我们一直追寻和期待，当你打开一个华丽的HTML5demo，是无尽的遐想还是无比的震撼？当它们真正在互联网上应用会是什么样的体验感觉，这让我对HTML5网页更加期待。我们应该感谢每一位HTML5网页开发者，和分享他们的人们!也希望大家能分享更多这些很炫的网站给我们。下面是从其他地方收集起来一些HTML5网页测试地址:http://www.beautyoftheweb.com1、跑鱼测试，不断增加鱼的数量，看你的FPS得分，这个也是很多友友都知道的，微软在发布IE9beta的时候 阅读全文
摘要：
实现方法：先画一个外框 width: 240px; height: 240px;border-radius: 120px;填充背景色background:#b1e4ff;描边border:2px solid #789cb6;加阴影box-shadow: 5px 5px 7px #999;给该死的firefox3私有属性-moz-border-radius: 120px;再画一个小圈，width: 230px; height: 230px;border-radius: 115px;定位，position: relative;top:5px;left:5px;填充背景色background:#3b 阅读全文