使用HTML5 Canvas绘制直线或折线等线条的方法讲解
|
HTML5 Canvas基本概念讲解 html5，说其是「新兴」的，其实也不算新了。毕竟，html5早在2008年其第一份正式草案就已经对外公布。从2008年算起，到现在也算是有些年头了。不过，到目前为止，对于大多数开发人员而言，仍然是「雷声大，雨点小」——听说html5的多，实际使用html5的却很少。 众所周知，html5中增加了许多新特性。在html5的众多特性中，Canvas应该算是最引人注目的新特性之一。我们使用html5的Canvas对象可以直接在浏览器的网页上绘制图形。这意味着浏览器可以脱离Flash等第三方插件，直接在网页上显示图形或动画。 现在，我们就来为html5初学者介绍如何使用html5 Canvas绘制基本的图形。 首先，我们需要准备如下html基础代码：
XML/HTML Code复制内容到剪贴板
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>HTML5 Canvas入门示例</title> </head> <body>
</body> </html> 上述代码是一个html5页面的基本代码模板。其中，第一行代码<!DOCTYPE html>是一个文档类型标签指令，这也是html5页面的标准文档类型指令，用于告诉浏览器「这是一个html5页面，请按照html5的网页标准来解析显示该页面」。第4行代码<meta charset="UTF-8">用于告诉浏览器「这个html5页面的字符编码为UTF-8」，这也是html5网页设置字符编码的标准写法。这与以往的html字符编码指令有所不同。
XML/HTML Code复制内容到剪贴板
<!-- 以往的html字符编码指令如下 --> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> 现在，我们就在包含上述代码的html文件中进行Canvas绘制图形的实例讲解。首先，我们在上述html代码的body部分添加如下canvas标签。
XML/HTML Code复制内容到剪贴板
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>HTML5 Canvas入门示例</title> </head> <body>
<!-- 添加canvas标签，并加上红色边框以便于在页面上查看效果 --> <canvas id="myCanvas" width="400px" height="300px" style="border: 1px solid red;"> 您的浏览器不支持canvas标签。 </canvas>
</body> </html> 此时，我们使用支持html5的浏览器打开该页面，将会看到如下内容：
（编辑：焦作站长网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
