这篇文章主要介绍了HTML5 Canvas入门学习教程,讲解了Canvas标签的基本使用及基本的JavaScript对Canvas的操作方式,需要的朋友可以参考下
HTML5
究竟什么是HTML5？在W3C HTML5的常见问题中，关于HTML5是这样说明的：HTML5是一个开放的平台下开发的免费许可条款。
具体来说，对这句话有以下两种理解：
“
指一组共同构成了未来开放式网络平台的技术。这些技术包括HTML5规范、CSS3、SVG、MATHML、地理位置、XmlHttpRequest、Context 2D、Web字体以及其他技术。这一套技术的边界是非正式的，且随时间变化的。
指HTML5规范，当然也是开放式网络平台的一部分。
”
Canvas的浏览器支持
以下我列出了最流行的Web浏览器以及它们开始支持Canvas元素的最小版本号。
| Safari | Firefox | IE | Chrome | Opear | iOS Safari | Android Brower |
|---|
| 3.2 | 3.5 | 9 | 9 | 10.6 | 3.2 | 2.1 |
这里我推荐使用Chrome。
简单的HTML5页面
XML/HTML Code复制内容到剪贴板
- >
-
- <html lang="zh">
-
- <head>
- <meta charset="UTF-8">
- <title>基础的HTML5页面title>
- head>
-
- <body> Hello Airing! body>
-
- html>
演示运行结果如下：
HTML是由一个个形如尖括号<>的标签元素组成，这些标签通常是成对出现，并且标签之间只能嵌套不能交叉。
扩展：
成对出现的叫做闭合标签，单个出现的叫做单标签。不管怎样都是闭合的(单标签可以不闭合，但是在XHTML中严格要求了闭合)。闭合标签又分为开始标签和结束标签，如
是开始标签，是结束标签。自标签如
等。
关于更多的标签，建议大家自行了解一下。推荐W3school平台自学。
这里我们着重讲一下上述代码中出现的标签。
这个标签说明 Web 浏览器将在标准模式下呈现页面。根据 W3C 定义的 HTML5 规范，这是 HTML5 文档所必需的。这个标签简化了长期以来在不同的浏览器呈现 HTML 页面时出现的奇怪差异。它通常为文档中的第一行。
这是包含语言说明的标签，例如，"en"为英语，"zh"为中文。
这2个标记符分别表示头部信息的开始和结尾。头部中包含的标记是页面的标题、序言、说明等内容，它本身不作为内容来显示，但影响网页显示的效果。头部中最常用的标记符是
标记符和<meta>标记符。<br/></p><p>以下表格列出了HTML head 元素下的所有标签和功能：<br/><table><thead><tr><th style="TEXT-ALIGN: center">标签</th><th style="TEXT-ALIGN: center">描述</th></tr></thead><tbody><tr><td style="TEXT-ALIGN: center"><code><head></code></td><td style="TEXT-ALIGN: center">定义了文档的信息</td></tr><tr><td style="TEXT-ALIGN: center"><code><title></code></td><td style="TEXT-ALIGN: center">定义了文档的标题</td></tr><tr><td style="TEXT-ALIGN: center"><code><base></code></td><td style="TEXT-ALIGN: center">定义了页面链接标签的默认链接地址</td></tr><tr><td style="TEXT-ALIGN: center"><code><link></code></td><td style="TEXT-ALIGN: center">定义了一个文档和外部资源之间的关系</td></tr><tr><td style="TEXT-ALIGN: center"><code><meta></code></td><td style="TEXT-ALIGN: center">定义了HTML文档中的元数据</td></tr><tr><td style="TEXT-ALIGN: center"><code> </span></span></li></ol></div></div><p>在实际项目开发中，都是将HTML、CSS、JS三者完全分离的。不过用于案例演示代码略少，所以大多没有使用加载外部 .js 文件的方式。</p><p><br/><strong>获取canvas对象<br/></strong>获取canvas对象其实就是一句话的事情。<br/></p><div class="codeText"><div class="codeHead"><span class="lantxt">JavaScript Code</span><span style="CURSOR: pointer" class="copyCodeText" onclick="copyIdText('code_6409')">复制内容到剪贴板</span></div><div id="code_6409"><ol class="dp-c"><li class="alt"><span><span class="keyword">var</span><span> canvas = document.getElementById(</span><span class="string">"canvas"</span><span>); </span></span></li></ol></div></div><p>var用于变量定义，由于JS是弱类型语言，所以定义啥变量都用var。跟在var之后的canvas是变量。使用document对象的getElementById()的方法，通过id获取对象。之前我们为<canvas>标签赋予了一个id，名叫canvas，所以该句话最后一个canvas是指<canvas>的id——canvas。（是不是有点绕，需要自己多读几遍捋清楚。）<br/>获得画笔(2D环境)<br/>画画首先需要啥？画笔啊。获取canvas画笔也是一句话的事情，就是直接使用刚才获得的canvas对象，调用它的getContext("2d")方法，即可。<br/></p><div class="codeText"><div class="codeHead"><span class="lantxt">JavaScript Code</span><span style="CURSOR: pointer" class="copyCodeText" onclick="copyIdText('code_2118')">复制内容到剪贴板</span></div><div id="code_2118"><ol class="dp-c"><li class="alt"><span><span class="keyword">var</span><span> context = canvas.getContext(</span><span class="string">"2d"</span><span>); </span></span></li></ol></div></div><p>这里的context便是画笔了。<br/>在其他教程中都是使用2D环境这个专有术语，我觉得画笔更加形象。灵感引自Java中Graphics类的g画笔，原理与之相同。</p><p><br/><strong>总结<br/></strong>准备工作只有三步：</p><p>1.布置画布：通过添加<canvas>标签，添加canvas元素<br/>2.获取画布：通过<canvas>标签的id，获得canvas对象<br/>3.获得画笔：通过canvas对象的getContext("2d")方法，获得2D环境</p><p>对应的代码也就是三句话：</p><div class="codeText"><div class="codeHead"><span class="lantxt">JavaScript Code</span><span style="CURSOR: pointer" class="copyCodeText" onclick="copyIdText('code_5234')">复制内容到剪贴板</span></div><div id="code_5234"><ol class="dp-c"><li class="alt"><span><span><canvas id=“canvas”></canvas> </span></span></li><li><span></span><span class="keyword">var</span><span> canvas = document.getElementById(</span><span class="string">"canvas"</span><span>); </span></li><li class="alt"><span></span><span class="keyword">var</span><span> context = canvas.getContext(</span><span class="string">"2d"</span><span>); </span></li></ol></div></div><p>完整代码如下。<br/></p><div class="codeText"><div class="codeHead"><span class="lantxt">JavaScript Code</span><span style="CURSOR: pointer" class="copyCodeText" onclick="copyIdText('code_3843')">复制内容到剪贴板</span></div><div id="code_3843"><ol class="dp-c"><li class="alt"><span><span><!doctype html> </span></span></li><li><span><html lang=</span><span class="string">"zh"</span><span>> </span></li><li class="alt"><span><head> </span></li><li><span> <meta charset=</span><span class="string">"UTF-8"</span><span>> </span></li><li class="alt"><span> <title>基础的Canvas "canvas-warp"> "canvas" style="border: 1px solid #aaaaaa; display: block; margin: 50px auto;" width="800" height="600"> 你的浏览器居然不支持Canvas？！赶快换一个吧！！