HTML5 Canvas入门学习教程


Posted in HTML / CSS onMarch 17, 2016

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 元素下的所有标签和功能:

标签 描述
定义了文档的信息
定义了文档的标题
定义了页面链接标签的默认链接地址
定义了一个文档和外部资源之间的关系
定义了HTML文档中的元数据
定义了客户端的脚本文件
定义了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对象)绘制出高逼格的图像吧!觉醒吧!艺术家之魂!

HTML / CSS 相关文章推荐
灵活运用CSS3特性绘制简易版围棋效果
Sep 28 HTML / CSS
CSS3解决移动页面上点击链接触发色块的问题
Jun 03 HTML / CSS
CSS3 完美实现圆角效果
Jul 13 HTML / CSS
CSS3 透明色 RGBA使用介绍
Aug 06 HTML / CSS
详解CSS3选择器的使用方法汇总
Nov 24 HTML / CSS
css3旋转木马_动力节点Java学院整理
Jul 12 HTML / CSS
css3 pointer-events 介绍详解
Sep 18 HTML / CSS
HTML5离线缓存在tomcat下部署可实现图片flash等离线浏览
Dec 13 HTML / CSS
HTML5的语法变化介绍
Aug 13 HTML / CSS
关于HTML5 Placeholder新标签低版本浏览器下不兼容的问题分析及解决办法
Jan 27 HTML / CSS
移动端HTML5实现文件上传功能【附代码】
Mar 25 HTML / CSS
使用Html5多媒体实现微信语音功能
Jul 26 HTML / CSS
HTML5 3D衣服摇摆动画特效
Mar 17 #HTML / CSS
利用HTML5 Canvas制作键盘及鼠标动画的实例分享
Mar 15 #HTML / CSS
通过HTML5 Canvas API绘制弧线和圆形的教程
Mar 14 #HTML / CSS
HTML5 canvas实现移动端上传头像拖拽裁剪效果
Mar 14 #HTML / CSS
html5 canvas移动浏览器上实现图片压缩上传
Mar 11 #HTML / CSS
HTML5实现多张图片上传功能
Mar 11 #HTML / CSS
html5+css3进度条倒计时动画特效代码【推荐】
Mar 08 #HTML / CSS
You might like
sae使用smarty模板的方法
2013/12/17 PHP
php教程之phpize使用方法
2014/02/12 PHP
Joomla数据库操作之JFactory::getDBO用法
2016/05/05 PHP
php性能分析之php-fpm慢执行日志slow log用法浅析
2016/10/17 PHP
php封装的验证码工具类完整实例
2016/10/19 PHP
javascript getElementsByClassName函数
2010/04/01 Javascript
初学Jquery插件制作 在SageCRM的查询屏幕隐藏部分行的功能
2011/12/26 Javascript
使用jQuery fancybox插件打造一个实用的数据传输模态弹出窗体
2013/01/15 Javascript
jquery js 重置表单 reset()具体实现代码
2013/08/05 Javascript
input禁止键盘及中文输入,但可以点击
2014/02/13 Javascript
一个通过script自定义属性传递配置参数的方法
2014/09/15 Javascript
jQuery中:last选择器用法实例
2014/12/30 Javascript
js实现touch移动触屏滑动事件
2015/04/17 Javascript
jquery对复选框(checkbox)的操作汇总
2016/01/13 Javascript
如何快速解决JS或Jquery ajax异步跨域的问题
2018/01/08 jQuery
基于VUE移动音乐WEBAPP跨域请求失败的解决方法
2018/01/16 Javascript
es6中比较有用的7个技巧小结
2019/07/12 Javascript
[47:03]Ti4第二日主赛事败者组 LGD vs iG 2
2014/07/21 DOTA
Python编程判断这天是这一年第几天的方法示例
2017/04/18 Python
python利用urllib实现爬取京东网站商品图片的爬虫实例
2017/08/24 Python
django上传图片并生成缩略图方法示例
2017/12/11 Python
PyQt QListWidget修改列表项item的行高方法
2019/06/20 Python
详解python 破解网站反爬虫的两种简单方法
2020/02/09 Python
基于 HTML5 的 WebGL 3D 版俄罗斯方块的示例代码
2018/05/28 HTML / CSS
马来西亚在线购物:POPLOOK.com
2019/12/09 全球购物
美国体育用品商店:Academy Sports + Outdoors
2020/01/04 全球购物
大学毕业生通用求职信
2013/09/28 职场文书
自我评价如何写好?
2014/01/05 职场文书
就业协议书的作用
2014/04/11 职场文书
收款委托书范本
2014/09/11 职场文书
幼儿园老师个人总结
2015/02/28 职场文书
法学专业求职信范文
2015/03/19 职场文书
党员“一帮一”活动总结
2015/05/07 职场文书
优秀班干部主要事迹材料
2015/11/04 职场文书
2016公司中秋节寄语
2015/12/07 职场文书
创业方案:赚钱的烧烤店该怎样做?
2019/07/05 职场文书