PHP8.1.21版本已发布
vue8.1.21版本已发布
jquery8.1.21版本已发布
首页
课程
路径
文章
PHP培训
精品课
下载
最新更新

技术文章  >  web前端 > H5教程

HTML5 Canvas入门学习教程_html5教程技巧

原创
2016-05-16 15:45:41 1850浏览

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复制内容到剪贴板
  1. nbsp;html>  
  2.   
  3. html lang="zh">  
  4.   
  5. head>  
  6.     meta charset="UTF-8">  
  7.     title>基础的HTML5页面title>  
  8. head>  
  9.   
  10. body> Hello Airing! body>  
  11.   
  12. html>  

演示运行结果如下：
2016317110813836.jpg (850×500)

HTML是由一个个形如尖括号的标签元素组成，这些标签通常是成对出现，并且标签之间只能嵌套不能交叉。
扩展：
成对出现的叫做闭合标签，单个出现的叫做单标签。不管怎样都是闭合的(单标签可以不闭合，但是在XHTML中严格要求了闭合)。闭合标签又分为开始标签和结束标签，如

是开始标签，是结束标签。自标签如
等。
关于更多的标签，建议大家自行了解一下。推荐W3school平台自学。
这里我们着重讲一下上述代码中出现的标签。
XML/HTML Code复制内容到剪贴板
  1. nbsp;html>  

这个标签说明 Web 浏览器将在标准模式下呈现页面。根据 W3C 定义的 HTML5 规范，这是 HTML5 文档所必需的。这个标签简化了长期以来在不同的浏览器呈现 HTML 页面时出现的奇怪差异。它通常为文档中的第一行。

XML/HTML Code复制内容到剪贴板
  1. html lang="en">  

这是包含语言说明的标签，例如，"en"为英语，"zh"为中文。

XML/HTML Code复制内容到剪贴板
  1. head>...head>   

这2个标记符分别表示头部信息的开始和结尾。头部中包含的标记是页面的标题、序言、说明等内容，它本身不作为内容来显示，但影响网页显示的效果。头部中最常用的标记符是

标记符和<meta>标记符。<br><p>以下表格列出了HTML head 元素下的所有标签和功能：<br></p><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></code></td> <td style="TEXT-ALIGN: center">定义了文档的信息</td> </tr><tr><td style="TEXT-ALIGN: center"><code><title></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><script></script></code></td> <td style="TEXT-ALIGN: center">定义了客户端的脚本文件</td> </tr><tr><td style="TEXT-ALIGN: center"><code><style></style></code></td> <td style="TEXT-ALIGN: center">定义了HTML文档的样式文件</td> </tr></tbody></table><br><div class="codeText"> <div class="codeHead"><span class="lantxt">XML/HTML Code</span><span style="CURSOR: pointer" class="copyCodeText" onclick="copyIdText('code_2641')">复制内容到剪贴板</span></div> <div id="code_2641"> <ol class="dp-xml"><li class="alt"><span><span class="tag"><span class="tag-name">meta</span><span> </span><span class="attribute">charset</span><span>=</span><span class="attribute-value">"UTF-8"</span><span class="tag">></span><span>  </span></span> </span></li> </ol></div> </div> <p>这个标签说明 Web 浏览器使用的字符编码模式，这里通常设置为UTF-8。如果没有需要特别设置的没必要改变它。这也是 HTML5 页面需要的元素。<br></p> <div class="codeText"> <div class="codeHead"><span class="lantxt">XML/HTML Code</span><span style="CURSOR: pointer" class="copyCodeText" onclick="copyIdText('code_8182')">复制内容到剪贴板</span></div> <div id="code_8182"> <ol class="dp-xml"><li class="alt"><span><span class="tag"><span class="tag-name">title</span><span class="tag">></span><span>...</span><span class="tag"></span><span class="tag-name">title</span><span class="tag">></span><span>   </span></span> </span></li> </ol></div> </div> <p>这个标签说明在浏览器窗口展示的 HTML 的标题。这是一个很重要的标记，它是搜索引擎用来在 HTML 页面上收录内容的主要信息之一。<br></p> <div class="codeText"> <div class="codeHead"><span class="lantxt">XML/HTML Code</span><span style="CURSOR: pointer" class="copyCodeText" onclick="copyIdText('code_7985')">复制内容到剪贴板</span></div> <div id="code_7985"> <ol class="dp-xml"><li class="alt"><span><span class="tag"><span class="tag-name">body</span><span class="tag">></span><span>...</span><span class="tag"></span><span class="tag-name">body</span><span class="tag">></span><span>   </span></span> </span></li> </ol></div> </div> <p>网页中显示的实际内容均包含在这2个</p>之间。
综上，HTML5网页是由第一行的与部分组成，而主要分为两部分——由标签规定的头部部分，和由规定的主体部分。
这样，我们就把最简单的HTML网页的基本结构给捋出来了。

添加一个Canvas
在HTML中添加Canvas非常简单，只需要在HTML的

部分，添加上标签就可以了！可以参考下面的代码。
XML/HTML Code复制内容到剪贴板
  1. nbsp;html>html lang="zh">head>meta charset="UTF-8">title>基础的HTML5页面title> head>  
  2. body>  
  3.     canvas id="canvas">  
  4.     你的浏览器居然不支持Canvas？！赶快换一个吧！！   
  5.     canvas>body>    
  6. html>  

由于结果页面是一个完完全全的空白页面，所以这里我就不贴图了。大家可能会很好奇，为什么会是一个空白呢？（废话，我还没来得及画画呢！）Canvas的本意是画布，也就是画布的意思（废话...），画布在HTML5中是透明的，是不可见的。
那标签中的那段文本是什么意思呢？那是一旦浏览器执行HTML页面时不支持Canvas，就会显示这段文字，换言之，只要你的浏览器支持Canvas，页面上就不会显示这个文本。
那中的id是什么意思？id是标签的属性之一，在JavaScript代码中用来指定特定的的名字，就像一个人的身份证号码一样，是唯一的。
为了更清楚的展示Canvas，以及方便之后的演示，我稍微修改了一下代码，之后的绘图都会在这个Canvas上绘制。

XML/HTML Code复制内容到剪贴板
  1. nbsp;html>  
  2. html lang="zh">  
  3. head>  
  4. meta charset="UTF-8">  
  5. title>基础的Canvastitle>  
  6. head>  
  7.   
  8. body>  
  9. div id="canvas-warp">  
  10.     canvas id="canvas" style="border: 1px solid #aaaaaa; display: block; margin: 50px auto;" width="800" height="600">  
  11.     你的浏览器居然不支持Canvas？！赶快换一个吧！！   
  12.     canvas>  
  13. div>  
  14. body>    
  15. html>  

运行结果：
2016317111155702.jpg (850×500)

对以上代码有几点说明：

1.添加了

标签，将包裹其中，个人习惯，暂时并没有什么卵用。
2.给标签指定了width和height属性，规定了它的宽和高。
3.给标签添加了一个内联样式，使其变为块级元素并居中显示。

关于CSS的内容这里不做说明，毕竟这不是本课程的主角，若做扩展会花费大量篇幅。

引用Canvas元素


文档对象模型(DOM)
文档对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理可扩展标志语言的标准编程接口。Document Object Model的历史可以追溯至1990年代后期微软与Netscape的“浏览器大战”，双方为了在JavaScript与JScript一决生死，于是大规模的赋予浏览器强大的功能。微软在网页技术上加入了不少专属事物，计有VBScript、ActiveX、以及微软自家的DHTML格式等，使不少网页使用非微软平台及浏览器无法正常显示。DOM即是当时蕴酿出来的杰作。
文档对象模型代表了在 HTML 页面上的所有对象。它是语言中立且平台中立的。它允许页面的内容和样式被 Web 浏览器渲染之后再次更新。用户可以通过 JavaScript 访问 DOM。
在开始使用前,首先需要了解两个特定的 DOM 对象：window 和 document。

window 对象是 DOM 的最高一级，需要对这个对象进行检测来确保开始使用 Canvas 应用程序之前，已经加载了所有的资源和代码。
document 对象包含所有在 HTML 页面上的 HTML 标签。需要对这个对象进行检索来找 出用 JavaScript 操纵的实例。

JavaScript放置位置
使用 JavaScript 为 Canvas 编程会产生一个问题：在创建的页面中，从哪里启动 JavaScript程序?
把 JavaScript 放进 HTML 页面的

标签中是个不错的主意，这样做的好处是很容易找到它，也是上一章我们介绍中所提到的。但是，把 JavaScript 程序放在这里就意味着整个 HTML 页面要加载完 JavaScrpit 才能配合 HTML 运行，这段 JavaScript 代码也会在整个页面加载前就开始执行了。结果就是，运行 JavaScript 程序之前必须检查 HTML 页面是否已经加载完毕。
最近有一个趋势是将 JavaScript 放在 HTML 文档结尾处的标签之前，这样就可以确保在 JavaScript 运行时整个页面已经加载完毕。然而，由于在运行程序前需要使用 JavaScript 测试页面是否加载，因此最好还是将 JavaScript 放在中。
不过本人不走寻常路(笑)，所以之后的案例，还是按照自己的编码风格将JavaScript代码放在了的尾部。当然，如果JavaScript代码有些多，就推荐使用加载外部 .js 文件的方式。代码大致如下：
JavaScript Code复制内容到剪贴板
  1. <script><span class="string">"text/javascript"</script> src="bootstarp.js">  

在实际项目开发中，都是将HTML、CSS、JS三者完全分离的。不过用于案例演示代码略少，所以大多没有使用加载外部 .js 文件的方式。


获取canvas对象
获取canvas对象其实就是一句话的事情。

JavaScript Code复制内容到剪贴板
  1. var canvas = document.getElementById("canvas");  

var用于变量定义，由于JS是弱类型语言，所以定义啥变量都用var。跟在var之后的canvas是变量。使用document对象的getElementById()的方法，通过id获取对象。之前我们为标签赋予了一个id，名叫canvas，所以该句话最后一个canvas是指的id——canvas。（是不是有点绕，需要自己多读几遍捋清楚。）
获得画笔(2D环境)
画画首先需要啥？画笔啊。获取canvas画笔也是一句话的事情，就是直接使用刚才获得的canvas对象，调用它的getContext("2d")方法，即可。

JavaScript Code复制内容到剪贴板
  1. var context = canvas.getContext("2d");  

这里的context便是画笔了。
在其他教程中都是使用2D环境这个专有术语，我觉得画笔更加形象。灵感引自Java中Graphics类的g画笔，原理与之相同。


总结
准备工作只有三步：

1.布置画布：通过添加标签，添加canvas元素
2.获取画布：通过标签的id，获得canvas对象
3.获得画笔：通过canvas对象的getContext("2d")方法，获得2D环境

对应的代码也就是三句话：

JavaScript Code复制内容到剪贴板
  1.   
  2. var canvas = document.getElementById("canvas");   
  3. var context = canvas.getContext("2d");  

完整代码如下。

JavaScript Code复制内容到剪贴板
  1. nbsp;html>   
  2. "zh">   
  3.   
  4.     <meta>"UTF-8">   
  5.     基础的Canvas   
  6.   
  7.   
  8.   
  9. "canvas-warp">   
  10.     "canvas" style="border: 1px solid #aaaaaa; display: block; margin: 50px auto;" width="800" height="600">   
  11.         你的浏览器居然不支持Canvas？！赶快换一个吧！！   
  12.        
  
  •   
  • <script>   </script>
  • window.onload = function(){   
  •     var canvas = document.getElementById("canvas");   
  •     var context = canvas.getContext("2d");   
  • }   
  •   
  •   
  •   
  •   
  •   

    • 2016317111405657.png (1433×771)

    注意几点：

    1.JavaScript代码需要包裹在<script>标签中。</script>

    2.window.onload = function(){}加载页面后就要立即执行，表示网页加载完执行后面的那个function函数体的内容。

    至此，画布和画笔已经准备完毕，接下来就让我们使用画笔(context对象)绘制出高逼格的图像吧！觉醒吧！艺术家之魂！

    声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn核实处理。
    上一条：HTML5 Canvas基本线条绘制的实例教程_html5教程技巧 下一条：HTML5 Canvas实现烟花绽放特效_html5教程技巧

    相关文章

    查看更多

    最新文章

    查看更多
    • 热门课程
    打开APP，随时随地在线学习！