欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

HTML5 Canvas入门学习教程

程序员文章站 2022-10-15 18:07:48
这篇文章主要介绍了HTML5 Canvas入门学习教程,讲解了Canvas标签的基本使用及基本的JavaScript对Canvas的操作方式,需要的朋友可以参考下... 16-03-17...

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. <!doctype 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>  

演示运行结果如下：
HTML5 Canvas入门学习教程

html是由一个个形如尖括号<>的标签元素组成，这些标签通常是成对出现，并且标签之间只能嵌套不能交叉。
扩展：
成对出现的叫做闭合标签，单个出现的叫做单标签。不管怎样都是闭合的(单标签可以不闭合，但是在xhtml中严格要求了闭合)。闭合标签又分为开始标签和结束标签，如<body>是开始标签，</body>是结束标签。自标签如<input/> <br/>等。
关于更多的标签，建议大家自行了解一下。推荐w3school平台自学。
这里我们着重讲一下上述代码中出现的标签。

xml/html code复制内容到剪贴板
  1. <!doctype html>  

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

xml/html code复制内容到剪贴板
  1. <html lang="en">  

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

xml/html code复制内容到剪贴板
  1. <head>...</head>   

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

以下表格列出了html head 元素下的所有标签和功能：

标签 描述
<head> 定义了文档的信息
<title> 定义了文档的标题
<base> 定义了页面链接标签的默认链接地址
<link> 定义了一个文档和外部资源之间的关系
<meta> 定义了html文档中的元数据
<script> 定义了客户端的脚本文件
<style> 定义了html文档的样式文件

xml/html code复制内容到剪贴板
  1. <meta charset="utf-8">  

这个标签说明 web 浏览器使用的字符编码模式，这里通常设置为utf-8。如果没有需要特别设置的没必要改变它。这也是 html5 页面需要的元素。

xml/html code复制内容到剪贴板
  1. <title>...</title>   

这个标签说明在浏览器窗口展示的 html 的标题。这是一个很重要的标记，它是搜索引擎用来在 html 页面上收录内容的主要信息之一。

xml/html code复制内容到剪贴板
  1. <body>...</body>   

网页中显示的实际内容均包含在这2个<body>之间。
综上，html5网页是由第一行的<!doctype html>与<html>部分组成，而<html>主要分为两部分——由<head>标签规定的头部部分，和由<body>规定的主体部分。
这样，我们就把最简单的html网页的基本结构给捋出来了。

添加一个canvas
在html中添加canvas非常简单，只需要在html的<body>部分，添加上<canvas>标签就可以了！可以参考下面的代码。

xml/html code复制内容到剪贴板
  1. <!doctype 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中是透明的，是不可见的。
那<canvas>标签中的那段文本是什么意思呢？那是一旦浏览器执行html页面时不支持canvas，就会显示这段文字，换言之，只要你的浏览器支持canvas，页面上就不会显示这个文本。
那<canvas>中的id是什么意思？id是标签的属性之一，在javascript代码中用来指定特定的<canvas>的名字，就像一个人的身份证号码一样，是唯一的。
为了更清楚的展示canvas，以及方便之后的演示，我稍微修改了一下代码，之后的绘图都会在这个canvas上绘制。

xml/html code复制内容到剪贴板
  1. <!doctype html>  
  2. <html lang="zh">  
  3. <head>  
  4. <meta charset="utf-8">  
  5. <title>基础的canvas</title>  
  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>  

运行结果：
HTML5 Canvas入门学习教程

对以上代码有几点说明：

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

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

引用canvas元素


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

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

javascript放置位置
使用 javascript 为 canvas 编程会产生一个问题：在创建的页面中，从哪里启动 javascript程序?
把 javascript 放进 html 页面的<head>标签中是个不错的主意，这样做的好处是很容易找到它，也是上一章我们介绍<head>中所提到的。但是，把 javascript 程序放在这里就意味着整个 html 页面要加载完 javascrpit 才能配合 html 运行，这段 javascript 代码也会在整个页面加载前就开始执行了。结果就是，运行 javascript 程序之前必须检查 html 页面是否已经加载完毕。
最近有一个趋势是将 javascript 放在 html 文档结尾处的</body>标签之前，这样就可以确保在 javascript 运行时整个页面已经加载完毕。然而，由于在运行<canvas>程序前需要使用 javascript 测试页面是否加载，因此最好还是将 javascript 放在<head>中。
不过本人不走寻常路(笑)，所以之后的案例，还是按照自己的编码风格将javascript代码放在了<body>的尾部。当然，如果javascript代码有些多，就推荐使用加载外部 .js 文件的方式。代码大致如下：

javascript code复制内容到剪贴板
  1. <script type="text/javascript" src="bootstarp.js"></script>  

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


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

javascript code复制内容到剪贴板
  1. var canvas = document.getelementbyid("canvas");  

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

javascript code复制内容到剪贴板
  1. var context = canvas.getcontext("2d");  

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


总结
准备工作只有三步：

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

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

javascript code复制内容到剪贴板
  1. <canvas id=“canvas”></canvas>   
  2. var canvas = document.getelementbyid("canvas");   
  3. var context = canvas.getcontext("2d");  

完整代码如下。

javascript code复制内容到剪贴板
  1. <!doctype html>   
  2. <html lang="zh">   
  3. <head>   
  4.     <meta charset="utf-8">   
  5.     <title>基础的canvas</title>   
  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.   
  15. <script>   
  16. window.onload = function(){   
  17.     var canvas = document.getelementbyid("canvas");   
  18.     var context = canvas.getcontext("2d");   
  19. }   
  20. </script>   
  21. </body>   
  22.   
  23. </html>   
  24.   

HTML5 Canvas入门学习教程

注意几点：

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

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

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

上一篇： HTML5 3D衣服摇摆动画特效

下一篇： HTML5 Canvas基本线条绘制的实例教程

推荐阅读