自从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自打出生就注定要开始它不平凡的一生，各大科技公司都对其寄予厚望，并纷纷进行尝试。苹果、谷歌、微软陆续推出HTML5展示页面，各大视频网站也相继宣布支持HTML5视频技术，HTML5地理定位技术更如雨后春笋，在国外社交网站得到应用。 另一方面，在移动设备平台，iPhone的出货量已经超过1亿部，而iPad的销量也超过了1500万台，iPad2也在首周销量了近100万台，销售额达到95亿，占整个平板市场份额的90%。我们知道，这俩不支持Fla...
//openDatabase方法打开已经存在的数据库，如果不存在将会创建一个数据库，参数分别是 数据库的名称，版本，数据库的描述，和数据大小 var db = window.openDatabase("mydatabase", "1.0", "我的数据库描述", 20000);数据库的SQL语句的使用方法 dbname.transaction(function (tx) { tx.executeSql(sql); });代码如下: //openDatabase方法打开已经存在的数据库，如果不存在将会创建一个...
最近我在重新设计自己的博客站点，决定用一个日历样式的icon显示时间。以前的解决方案一般是用背景图片，感谢css3，现在我们用css3就能实现这样的功能。我将会用到一些linear-gradients, border radius 和 box shadow这些属性来代替以前的photoshop设计。 photoshop 概念图 很多设计者采用直接在浏览器上设计的方式，但是我还是更喜欢先做photoshop的概念图的方式。虽然现在很多效果可以直接用css实现，但是用photoshop设计效果的...
可能大家在使用jquery mobile时，经常会看到data-role、data-theme等的使用，比如：通过如下代码即可实现页眉的效果：代码如下: 我是标题通过手机浏览，效果如下： 为什么写一个data-role="header"就能实现底部为黑色、文字居中显示的效果呢？本文提供一种最简单的实现办法，让大家对这些用法有个直观的了解。我们写一个html页面，自定义一个data-chb="header"的属性，希望具备这个属性的div区域背景颜色为黑色，文字为白色，居...
在html 5中的audio标签中，只有暂停按钮，但没有停止按钮，其实为其增加也不麻烦，方法如下： 代码如下: HTMLAudioElement.prototype.stop = function() { this.pause(); this.currentTime = 0.0; } 其实很简单，就是先暂停，然后时间归0； 调用方法： 代码如下: var aud = new Audio(); aud.src = 特殊他.ogg; aud.play(); aud.stop(); 上面代码可以在chrome,opera下跑，但firefox 17不行
html5大行其道的时代已经到来。如果你还在等待浏览器兼容，说明你已经与web脱节几条街了。当然，这得益于移动客户端的蓬勃发展。如果还在纠结于，是否应该掌握html5和css3技术时，请狠狠的抽自己几个嘴巴，然后，苦学吧！因为前端的春天已经到来，而且不止一个春天。如果你不信，我只能说：爱信不信！ 下面我们来看一个标准的html5标签结构：（我这里只是说标签，其它概不涉及） 代码如下: html5
概述 HTML5中的Canvas并没有直接提供绘制椭圆的方法，下面是对几种绘制方法的总结。各种方法各有优缺，视情况选用。各方法的参数相同： context为Canvas的2D绘图环境对象， x为椭圆中心横坐标， y为椭圆中心纵坐标， a为椭圆横半轴长， b为椭圆纵半轴长。 参数方程法 该方法利用椭圆的参数方程来绘制椭圆 代码如下: //-----------用参数方程绘制椭圆--------------------- //函数的参数x,y为椭圆中心；a,b分别为椭圆横半轴、 //纵半...
前面的文章我已经讲了3种在canvas中画曲线的方法：arc,arcTo以及quadraticCurveTo.他们都有一个共同点，就是他们画的曲线都只能偏向一边，今天讲的bezierCurveTo与他们最大的不同点就是有两个控制点，即可以画出S形的曲线了。 bezierCurveTo，也就是所谓的贝赛尔曲线了，如果你学过某些画图工具，就能马上理解。 bezierCurveTo的语法如下： ctx.bezierCurveTo(x1,y1,x2,y2,x,y);他的参数我照例解释一下，其中的（x1,y1）即控制点1的...
继续讲canvas中画曲线的方法，今天讲quadraticCurveTo。 说实话这个方法有点吓人，单从函数名称上都可以初体验。话说，我觉得有必要把这个函数名缩短。 quadratic的意思是二次，即数学中二次元方程那个二次。而ctx.quadraticCurveTo的参数如下： 代码如下: ctx.quadraticCurveTo(x1,y1,x,y); 其中x,y是终点的坐标，而x1,y1是曲线控制点的坐标？什么？你问我起点在哪里？起点在此之前用moveTo确定。 我之所以把控制点的坐标带上序号...
上一篇文章讲了canvas的arc方法，这一篇讲和他有关的arcTo方法。 arc与arcTo，从名字都能看出来相似。arcTo也是画曲线的方法，而且他画出的曲线也是正圆的一段弧线。但他的参数和arc简直是不共戴天~ ctx.arcTo(x1,y1,x2,y2,radius);arcTo的参数中包括两个点，而且这两个点中并没有表示圆心的点，仅仅最后的参数是圆的半径，表示arcTo和圆有那么点关系。 网上关于arcTo的文章很少，好不容易找到一篇还是外国的；而且canvas画图木有直...
在canvas画线条这篇文章中，我讲了画直线的方法，按理这篇画曲线的文章早该发了，但由于canvas画曲线比较特殊，我还没摸透，所以要一步步尝试。 canvas里画曲线的难点之一，就在于他连曲线的函数就有4个！分别是arc,arcTo,quadraticCurveTo,bezierCurveTo.我从最简单的arc方法讲起吧。 arc的作用是画一个正规的圆弧，可以是一个完整的圆，也可以是一个圆的某一段弧线。 arc的语法如下： 代码如下: context.arc(x, y, radius, start...
一般绘图的方式有两种，即填充和描边，前面的文章已经讲了描边的方法stroke，本文就讲一下Canvas中填充图形的方法。 填充即fill(),很直白吧？而且和strokeStyle表示描边样式一样，fillStyle即表示填充样式。 ctx.fillStyle = '颜色';默认的填充样式是不透明的黑色 提问：未闭合的路径可以填充吗？ 可以。Canvas会从你当前路径的终点直接连接到起点，然后填充。如图： 但你可以发现，最后一段没有描边。 记得我们前一篇文章用4条线画...
最近在用svg的点击事件做东西，之所以用svg而不用canvas就是因为svg内的元素可以添加点击事件，他们之间详细的区别如下： Canvas 与 SVG 的比较（详见） 下表列出了 canvas 与 SVG 之间的一些不同之处。 Canvas •依赖分辨率 •不支持事件处理器 •弱的文本渲染能力 •能够以 .png 或 .jpg 格式保存结果图像 •最适合图像密集型的游戏，其中的许多对象会被频繁重绘 SVG •不依赖分辨率 •支持事件处理...