HTML5 Canvas基本概念讲解html5,这个应该就不需要多作介绍了,只要是开发人员应该都不会陌生。html5是「新兴」的网页技术标准,目前,除IE8及其以下版本的IE浏览器之外,几乎所有主流浏览器(FireFox、Chrome、Opera、Safari、IE9+)都已经开始支持html5了。除此之外,在移动浏览器市场上,众多的移动浏览器也纷纷展开关于「html5的支持能力以及性能表现」的军备竞赛。html作为革命性的网页技术标准,再加上众多浏览器厂商或组织的鼎力支持,可以想见,html5将会成为未来网页技术的领头羊。
html5,说其是「新兴」的,其实也不算新了。毕竟,html5早在2008年其第一份正式草案就已经对外公布。从2008年算起,到现在也算是有些年头了。不过,到目前为止,对于大多数开发人员而言,仍然是「雷声大,雨点小」——听说html5的多,实际使用html5的却很少。
众所周知,html5中增加了许多新特性。在html5的众多特性中,Canvas应该算是最引人注目的新特性之一。我们使用html5的Canvas对象可以直接在浏览器的网页上绘制图形。这意味着浏览器可以脱离Flash等第三方插件,直接在网页上显示图形或动画。
现在,我们就来为html5初学者介绍如何使用html5 Canvas绘制基本的图形。
首先,我们需要准备如下html基础代码:
XML/HTML Code复制内容到剪贴板
html>
HTML5 Canvas入门示例上述代码是一个html5页面的基本代码模板。其中,第一行代码是一个文档类型标签指令,这也是html5页面的标准文档类型指令,用于告诉浏览器「这是一个html5页面,请按照html5的网页标准来解析显示该页面」。第4行代码用于告诉浏览器「这个html5页面的字符编码为UTF-8」,这也是html5网页设置字符编码的标准写法。这与以往的html字符编码指令有所不同。
XML/HTML Code复制内容到剪贴板
现在,我们就在包含上述代码的html文件中进行Canvas绘制图形的实例讲解。首先,我们在上述html代码的body部分添加如下canvas标签。
XML/HTML Code复制内容到剪贴板
html>
HTML5 Canvas入门示例您的浏览器不支持canvas标签。
此时,我们使用支持html5的浏览器打开该页面,将会看到如下内容:
在html5中,canvas标签本身并没有任何行为,仅仅只是在页面上占用指定大小的页面空白空间。canvas标签就相当于一块空白的画布,还需要我们自己使用JavaScript提供的canvas API编写相应的代码从而在这块画布上绘制出我们想要的图形。
备注:canvas标签体内的文字内容将会在不支持html5的浏览器中显示。如上述html代码