什么是Canvas是一个新的 HTML 元素，这个元素在 HTML5 中被定义。这个元素通常可以被用来在 HTML 页面中通过 JavaScript 进行绘制图形、合成图像等等操作，也可以用来做一些动画。当然，目前 HTML5 规范还在草稿阶段，正式发布也许要等到2010年，不过现在已经有不少浏览器已经支持了部分 HTML5 规范。目前支持 canvas 元素的浏览器有 Firefox 3+、Safari 4、Chrome 2.0+ 等，因此，在运行本页中的例子时，请确保你使用的是上述浏览...
2004年5月29日，在我退休的博客和所有的大话 ，当我调查40个设计师的网站，看看他们为公共页面元素使用的约定，如标题和横幅，导航，内容和页脚（那时候的结果 ）。 这几乎不是科学研究，但在那年6月，我跟进了Eric Meyer的一些意见 ，并出版了一套命名约定。当我发现一个网站已经通过了这些命名约定时，我总是很高兴，我任然每一天都在用，甚至超过4年后的每一天。 那时候我的想法可以概括成这样 id和class属性名称必须反映元素的...
在html 5增加了新元素header、footer，测试过发现IE不能解析html 5新增的元素。代码如下：无标题文档*{margin:0;padding:0;}header{background:#090;font-weight:bold;position:absolute;top:10px;}footer{background:#f90;font-weight:bold;position:absolute;bottom:10px;}这里是顶部这里是尾部用自定义标签可以解决浏览器兼容的问题代码如下：自定义html标签*{margin:0;padding:0;}layout\:header{background:#090;font-weight:...
上篇文章使用html5的touch事件把简单的滑动做出来了，实现了持续页面上下滑动的效果，参考之前的文章及代码html5 touch事件实现触屏页面上下滑动(一) 本文主要实现了一个效果：页面滑动到最上面和最下面的时候阻止其再继续滑动； 因为给页面添加了touch事件那么滚动条等其他页面原有的默认属性将别改变，上篇文章里的 demo可以一直向上滑动或向下滑动，但现实是这样是不可取的 完整代码：XML/HTML Code复制内容到剪贴板> html la...
HTML结构更加清晰、规范，学习HTML5优化结构的思路。HTML5添加了一些新元素，用来标识常用的结构，是html更具语义化，可是我们无法直接使用，即使可能用到还要等他个十年八年的。那就像微格式一样，使用class代替，或者随意点，使用id和class名来代替，让自己的结构更加清晰化，可以推广为规范，让团队协作更加顺畅。一些新增的结构标记◎section：这可以是书中的一章或一节，实际上可以是在HTML4中有自己的标题的任何东西◎header...
HTML5 是近十年来 Web 标准最巨大的飞跃。和以前的版本不同，HTML 5 并非仅仅用来表示 Web 内容，它的使命是将 Web 带入一个成熟的应用平台，在这个平台上，视频，音频，图象，动画，以及同电脑的交互都被标准化。尽管 HTML 5 的实现还有很长的路要走，但 HTML 5 正在改变 Web。HTML 最近的一次升级是1999年12月发布的 HTML 4.01。自那以后，发生了很多事。最初的浏览器战争已经结束，Netscape 灰飞烟灭，IE5 作为赢家后来又发展到...
一、基本概念 什么是Canvas 是一个新的 HTML 元素，这个元素在 HTML5 中被定义。这个元素通常可以被用来在 HTML 页面中通过 JavaScript 进行绘制图形、合成图像等等操作，也可以用来做一些动画。当然，目前 HTML5 规范还在草稿阶段，正式发布也许要等到2010年，不过现在已经有不少浏览器已经支持了部分 HTML5 规范。目前支持 canvas 元素的浏览器有 Firefox 3+、Safari 4、Chrome 2.0+ 等，因此，在运行本页中的例子时，请确保你使...
很多前端恐怕都不了解HTML5的拖拽怎么实现吧，本文了解了下思路。进行整理备份，便于以后查阅。 先上示例： index.htmlXML/HTML Code复制内容到剪贴板> html> head> meta charset="UTF-8"> title>Dragtitle> style> .box{ width: 400px; height: 400px; float: left; } #box1{ background: #CCC; ...
由于是源自笔记，对每个条目我只会列出称呼和语法特征，暂时没时间写详细的解释和可执行的示例，但是会给出相关的文档地址，除了列出已经支持该特性的浏览器，也会为不支持的浏览器提供替代/过渡的实现。好罢这篇本来是我私下做的笔记，我特别喜欢在Evernote上做备忘的笔记，虽然上次看到漏屋老师的文章里说我现在的年龄才刚刚进入记忆力的巅峰期……但是我的自信心仍然屡受打击！比如跟别人讨论The Dark Knight里小丑...
一、坐标系 其实只要玩过一点点图形编程的人都知道，电脑上的坐标系和数学上的坐标系稍微有点不同，坐标的原点在绘制区域（这里是Canvas）的左上角，X轴正向朝右，Y轴正向朝下，如下图声明：为本文为原创文章，作者保留所有权利！欢迎转载，转载请注明作者左洸和出处博客园二、Stroke 和 Fill HTML5中将图形分为两大类： 第一类称作 Stroke，我的理解就是轮廓、勾勒或者线条，总之，图形是由线条组成的； 第二类称作 Fill，就是填...
b 和 i 标签在现在的 Web 标准潜规则中是不推荐使用，甚至是反对使用的，因为认为他们只是“表现”粗体和斜体，而没有任何“语义”。更多的用 strong 和 em 标签代替。而在新的 HTML5 工作草案 中对于 b 和 i 标签是这样定义的：从规范中可以注意到：b 和 i 元素将被赋予真正的语义。更应有预见性注意 b 、i 与 strong 、em 的不同使用 。扩展阅读：HTML4 到 HTML5 的变化 A Preview of HTML 5 The b element ...
越来越多的站点开始使用 HTML5 标签，但是目前的情况是还有很多人在使用IE6、IE7、IE8。为了让所有浏览者都可以正常的访问，解决方案有下面两个： 1.为网站创建多套模板，通过程序对User-Agent的判断为不同的浏览器用户显示不同的页面，例如：优酷网。 2.使用Javascript来使不支持HTML5的浏览器支持HTML标签。 针对IE比较好的解决方案是html5shiv。htnl5shiv主要解决HTML5提出的新的元素不被IE6-8识别，这些新元素不能作为父节点包...
自从HTML5能为我们的新网页带来更高效洁净的代码而得到更多的关注，然而唯一能让IE识别那些新元素(如)的途径是使用HTML5 shiv,感谢remy sharp为我们提供了这个迷你脚本来解决IE支持HTML5的问题。 使用和下载 html5.js必须在页面head元素内调用(因为IE必须在元素解析前知道这个元素，所以这个js文件不能在页面底部调用。) 作者已经把js文件放在Google code project上并允许大家直接调用，当然，前提是你不在意调用额外的文件...
一、标签 Html5 引入了一个新的 标签，这个标签所代表的区域就好象一块画布，你的所有图形绘制最后都要在这块画布上呈现。有了这个标签，浏览器的图形表现力被极大的提升，Flash 和 SilverLight 有没有感到威胁呢? 新闻链接：Google声称Chrome7浏览器将提速60倍 标签的用法非常简单，如下： 代码如下: 你的浏览器不支持 Canvas 标签 标签和普通的 HTML 标签没有多大的区别，你可以设置它的宽度和高度，可以通过 CSS 设置它的背景...
下面是源码 需要浏览器支持html5 代码如下: if(document.createElement("canvas")){ if(document.getElementById("colorPicker").getContext){ var can = document.getElementById("colorPicker"); can.setAttribute("height",300); var cxt = can.getContext("2d"); var gradient = cxt.createLinearGradient(0.5,0.5,0,150); gradient.addColorStop(0,'#00ff00'); gradient.addColorStop(1,'#ff0000'); cxt.fillStyle=...