今天小编跟大家讲解下有关HTML5 Canvas入门学习教程 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关HTML5 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复制内容到剪贴板 <!doctypehtml> <htmllang="zh"> <head> <metacharset="UTF-8"> <title>基础的HTML5页面</title> </head> <body>HelloAiring!</body> </html>演示运行结果如下：
HTML是由一个个形如尖括号<>的标签元素组成 这些标签通常是成对出现 并且标签之间只能嵌套不能交叉。扩展：成对出现的叫做闭合标签 单个出现的叫做单标签。不管怎样都是闭合的(单标签可以不闭合 但是在XHTML中严格要求了闭合)。闭合标签又分为开始标签和结束标签 如<body>是开始标签 </body>是结束标签。自标签如<input/> <br/>等。关于更多的标签 建议大家自行了解一下。推荐W3school平台自学。这里我们着重讲一下上述代码中出现的标签。
XML/HTML Code复制内容到剪贴板 <!doctypehtml>这个标签说明 Web 浏览器将在标准模式下呈现页面。根据 W3C 定义的 HTML5 规范 这是 HTML5 文档所必需的。这个标签简化了长期以来在不同的浏览器呈现 HTML 页面时出现的奇怪差异。它通常为文档中的第一行。
XML/HTML Code复制内容到剪贴板 <htmllang="en">这是包含语言说明的<html>标签 例如 "en"为英语 "zh"为中文。
XML/HTML Code复制内容到剪贴板 <head>...</head>这2个标记符分别表示头部信息的开始和结尾。头部中包含的标记是页面的标题、序言、说明等内容 它本身不作为内容来显示 但影响网页显示的效果。头部中最常用的标记符是<title>标记符和<meta>标记符。
以下表格列出了HTML head 元素下的所有标签和功能： 标签 描述 <head> 定义了文档的信息 <title> 定义了文档的标题 <base> 定义了页面链接标签的默认链接地址 <link> 定义了一个文档和外部资源之间的关系 <meta> 定义了HTML文档中的元数据 <script> 定义了客户端的脚本文件 <style> 定义了HTML文档的样式文件
XML/HTML Code复制内容到剪贴板 <metacharset="UTF-8">这个标签说明 Web 浏览器使用的字符编码模式 这里通常设置为UTF-8。如果没有需要特别设置的没必要改变它。这也是 HTML5 页面需要的元素。
XML/HTML Code复制内容到剪贴板 <title>...</title>这个标签说明在浏览器窗口展示的 HTML 的标题。这是一个很重要的标记 它是搜索引擎用来在 HTML 页面上收录内容的主要信息之一。
XML/HTML Code复制内容到剪贴板 <body>...</body>网页中显示的实际内容均包含在这2个<body>之间。综上 HTML5网页是由第一行的<!doctype html>与<html>部分组成 而<html>主要分为两部分——由<head>标签规定的头部部分 和由<body>规定的主体部分。这样 我们就把最简单的HTML网页的基本结构给捋出来了。
添加一个Canvas在HTML中添加Canvas非常简单 只需要在HTML的<body>部分 添加上<canvas>标签就可以了！可以参考下面的代码。
XML/HTML Code复制内容到剪贴板 <!doctypehtml><htmllang="zh"><head><metacharset="UTF-8"><title>基础的HTML5页面</title></head> <body> <canvasid="canvas"> 你的浏览器居然不支持Canvas ！赶快换一个吧！！ </canvas></body> </html>由于结果页面是一个完完全全的空白页面 所以这里我就不贴图了。大家可能会很好奇 为什么会是一个空白呢 （废话 我还没来得及画画呢！）Canvas的本意是画布 也就是画布的意思（废话...） 画布在HTML5中是透明的 是不可见的。那<canvas>标签中的那段文本是什么意思呢 那是一旦浏览器执行HTML页面时不支持Canvas 就会显示这段文字 换言之 只要你的浏览器支持Canvas 页面上就不会显示这个文本。那<canvas>中的id是什么意思 id是标签的属性之一 在Javascript代码中用来指定特定的<canvas>的名字 就像一个人的身份证号码一样 是唯一的。为了更清楚的展示Canvas 以及方便之后的演示 我稍微修改了一下代码 之后的绘图都会在这个Canvas上绘制。
XML/HTML Code复制内容到剪贴板 <!doctypehtml> <htmllang="zh"> <head> <metacharset="UTF-8"> <title>基础的Canvas</title> </head> <body> <divid="canvas-warp"> <canvasid="canvas"style="border:1pxsolid#aaaaaa;display:block;margin:50pxauto;"width="800"height="600"> 你的浏览器居然不支持Canvas ！赶快换一个吧！！ </canvas> </div> </body> </html>运行结果：
对以上代码有几点说明：
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复制内容到剪贴板 <scripttype="text/javascript"src=http://xyrl.com/skin/7ke/image/nopic.gif>cript>在实际项目开发中 都是将HTML、CSS、JS三者完全分离的。不过用于案例演示代码略少 所以大多没有使用加载外部 .js 文件的方式。
获取canvas对象获取canvas对象其实就是一句话的事情。
Javascript Code复制内容到剪贴板 varcanvas=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复制内容到剪贴板 varcontext=canvas.getContext("2d");这里的context便是画笔了。在其他教程中都是使用2D环境这个专有术语 我觉得画笔更加形象。灵感引自Java中Graphics类的g画笔 原理与之相同。
总结准备工作只有三步：
1.布置画布：通过添加<canvas>标签 添加canvas元素2.获取画布：通过<canvas>标签的id 获得canvas对象3.获得画笔：通过canvas对象的getContext("2d")方法 获得2D环境
对应的代码也就是三句话：
Javascript Code复制内容到剪贴板 <canvasid=“canvas”></canvas> varcanvas=document.getElementById("canvas"); varcontext=canvas.getContext("2d");完整代码如下。
Javascript Code复制内容到剪贴板 <!doctypehtml> <htmllang="zh"> <head> <metacharset="UTF-8"> <title>基础的Canvas</title> </head> <body> <divid="canvas-warp"> <canvasid="canvas"style="border:1pxsolid#aaaaaa;display:block;margin:50pxauto;"width="800"height="600"> 你的浏览器居然不支持Canvas ！赶快换一个吧！！ </canvas> </div> <script> window.onload=function(){ varcanvas=document.getElementById("canvas"); varcontext=canvas.getContext("2d"); } </script> </body> </html>注意几点：
1.Javascript代码需要包裹在<script>标签中。
2.window.onload = function(){}加载页面后就要立即执行 表示网页加载完执行后面的那个function函数体的内容。
至此 画布和画笔已经准备完毕 接下来就让我们使用画笔(context对象)绘制出高逼格的图像吧！觉醒吧！艺术家之魂！
来源：爱蒂网
