一、HTML5 Canvas历史

　　Canvas的概念最初是由苹果公司提出的，用于在Mac OS X WebKit中创建控制板部件(dashboard widget)。在Canvas出现之前，开发人员若要在浏览器中使用绘图API，只能使用Adobe的Flash和SVG(Scalable Vector Graphics，可伸缩矢量图形)插件，或者只有IE才支持的VML(Vector Markup Language，矢量标记语言)，以及其他一些稀奇古怪的JavaScript技巧。

　　假设我们要在没有canvas元素的条件下绘制一条对角线--听起来似乎很简单，但实际上如果没有一套二维绘图API的话，这会是一项相当复杂的工作。HTML5 Canvas能够提供这样的功能，对浏览器端来说此功能非常有用，因此Canvas被纳入了HTML5规范。

　　起初，苹果公司曾暗示可能会为WHATWG(Web Hypertext Application Technology Working Group，Web超文本应用技术工作组)草案中的Canvas规范申请知识产权，这在当时引起了一些Web标准化追随者的关注。不过，苹果公司最终还是按照W3C的免版税专利权许可条款公开了其专利。

　　SVG和CANVAS对比

　　"Canvas本质上是一个位图画布，其上绘制的图形是不可缩放的，不能像SVG图像那样可以被放大缩小。此外，用Canvas绘制出来的对象不属于页面DOM结构或者任何命名空间--这点被认为是一个缺陷。SVG图像却可以在不同的分辨率下流畅地缩放，并且支持点击检测(能检测到鼠标点击了图像上的哪个点)。

　　既然如此，为什么WHATWG的HTML5规范不使用SVG呢?尽管Canvas有明显的不足，但HTML Canvas API有两方面优势可以弥补：首先，不需要将所绘制图像中的每个图元当做对象存储，因此执行性能非常好;其次，在其他编程语言现有的优秀二维绘图API的基础上实现Canvas API相对来说比较简单。毕竟，二鸟在林不如一鸟在手。

　　二、Canvas到底是什么

　　在网页上使用canvas元素时，它会创建一块矩形区域。默认情况下该矩形区域宽为300像素，高为150像素，但也可以自定义具体的大小或者设置canvas元素的其他特性。一下代码是可放到HTML页面中的最基本的canvas元素。

<canvas></canvas> 

　　在页面中加入了canvas元素后，我们便可以通过JavaScript来自由地控制它。可以在其中添加图片、线条以及文字，也可以在里面绘图，甚至还可以加入高级动画。

　　大多数主流操作系统和框架支持的二维绘制操作，HTML5 Canvas API都支持。如果你在近年来曾经有过二维图像编程的经验，那么会对HTML5 Canvas API感觉非常顺手，因为这个API就是参照既有系统设计的。如果没有这方面经验，则会发现与这么多年来一直使用的图片加CSS开发Web图形的方式比起来，Canvas的渲染系统有多么强大。

　　使用canvas编程，首先要获取其上下文(context)。接着在上下文中执行动作，最后将这些动作应用到上下文中。可以将canvas的这种编辑方式想象成为数据库事务：开发人员先发起一个事务，然后执行某些操作，最后提交事务。

　　三、Canvas坐标

　　如图2-1所示，canvas中的坐标是从左上角开始的，x轴沿着水平方向(按像素)向右延伸，y轴沿垂直方向向下延伸。左上角坐标为x=0，y=0的点称作原点。

四、什么情况下不用Canvas

　　尽管canvas元素功能非常强大，用处也很多，但在某些情况下，如果其他元素已经够用了，就不应该再使用canvas元素。例如，用canvas元素在HTML页面中动态绘制所有不同的标题，就不如直接使用标题样式标签(H1、H2等)，它们所实现的效果是一样的。

　　五、替代内容

　　访问页面的时候，如果浏览器不支持canvas元素，或者不支持HTML5 Canvas API中的某些特性，那么开发人员最好提供一份替代代码(2.1.7节中的表2-1详细介绍了浏览器对canvas的支持情况)。例如，开发人员可以通过一张替代图片或者一些说明性的文字告诉访问者，使用最新的浏览器可以获得更佳的浏览效果。代码清单2-2展示了如何在canvas中指定替代文本，当浏览器不支持canvas的时候会显示这些替代内容。

　　在canvas元素中使用替代内容代码如下：

<canvas>  
  Update your browser to enjoy canvas!   
</canvas> 

　　除了上面代码中的文本外，同样还可以使用图片，不论是文本还是图片都会在浏览器不支持canvas元素的情况下显示出来。

　　canvas元素的可访问性怎么样

　　"提供替代图像或替代文本引出了可访问性这个话题--很遗憾，这是HTML5 Canvas规范中明显的缺陷。例如，没有一种原生方法能够自动为已插入到canvas中的图片生成用于替换的文字说明。同样，也没有原生方法可以生成替代文字以匹配由Canvas Text API动态生成的文字。在写本书的时候，暂时还没有其他方法可以处理canvas中动态生成的内容，不过已经有工作组开始着手这方面的设计了。让我们一起期待吧。“

　　六、CSS和Canvas

　　同大多数HTML元素一样，canvas元素也可以通过应用CSS的方式来增加边框，设置内边距、外边距等，而且一些CSS属性还可以被canvas内的元素继承。比如字体样式，在canvas内添加的文字，其样式默认同canvas元素本身是一样的。

　　此外，在canvas中为context设置属性同样要遵从CSS语法。例如，对context应用颜色和字体样式，跟在任何HTML和CSS文档中使用的语法完全一样。

　　七、浏览器对HTML5 Canvas的支持

　　除了Internet Explorer以外，其他所有浏览器现在都提供对HTML5 Canvas的支持。不过，随后我们会列出一部分还没有被普遍支持的规范，Canvas Text API 就是其中之一，但是作为一个整体，HTML5 Canvas规范已经非常成熟，不会有特别大的改动了。从表2-1中可以看到，已经有很多浏览器支持HTML5 Canvas了。

　　表2-1　浏览器对HTML5 Canvas的支持

浏  览  器

支持情况

Chrome

从1.0版本开始支持

Firefox

从1.5版本开始支持

Internet Explorer

不支持

Opera

从9.0版本开始支持

Safari

从1.3版本开始支持

　　从上面的表格中可以看出，在所有浏览器中，只有Internet Explorer不支持HTML5 Canvas。如果需要在Internet Explorer中使用canvas，可以选择使用名为explorercanvas的开源项目(http://code.google.com/p/explorercanvas)。使用explorercanvas时，需要先判断当前浏览器是否是Internet Explorer，如果是则在页面中嵌入script标签来加载explorercanvas。写法如下：

<head> 
<!--[if IE]><script src="excanvas.js"></script><![endif]-->
</head> 

　　开发者迫切希望Canvas可以受到广泛支持，因此不断有项目启动来尝试解决老浏览器或者非标准浏览器不支持Canvas的问题。微软已经宣布Internet Explorer 9将支持canvas，因此，所有主流浏览器都支持canvas已经指日可待了。

　　由于各家浏览器对canvas的支持程度有差异，所以最好在使用API之前，先测试一下HTML5 Canvas是否被支持。

　　如何测试浏览器是否支持HTML5 Canvas，我们下一篇介绍。

HTML5中Canvas概述的更多相关文章

  1. H5_0009：关于HTML5中Canvas的宽、高设置问题

    关于HTML5中Canvas的宽.高设置问题 Canvas元素默认宽 300px, 高 150px, 设置其宽高可以使用如下方法(不会被拉伸): 方法一:        <canvas widt ...

  2. html5中canvas的使用 获取鼠标点击页面上某点的RGB

    1.html5中的canvas在IE9中可以跑起来.在IE8则跑不起来,这时候就需要一些东西了. 我推荐这种方法,这样显得代码不乱. <!--[if lt IE9]> <script ...

  3. HTML5 中canvas支持触摸屏的签名面板

    1.前言 最近实在是太忙了,从国庆之后的辞职,在慢慢的找工作,到今天在现在的这家公司上班大半个月了,太多的心酸泪无以言表,面试过程中,见到的坑货公司是一家又一家,好几家公司自己都只是上一天班就走了,其 ...

  4. HTML5中canvas介绍

    1.什么是Canvas canvas 是 HTML5 提供的一个用于展示绘图效果的标签 canvas 提供了一个空白的图形区域,可以使用特定的JavaScript API来绘画图形(canvas 2D ...

  5. HTML5中canvas大小调整

    今天用到canvas元素,发现它的大小不是像普通dom元素一样,直接设置css样式可以改变的,它会由自己原本的大小伸缩. 例如, <canvas id='canvas'></canv ...

  6. html5中Canvas为什么要用getContext('2d')

    HTML DOM getContext() 方法 HTML DOM Canvas 对象 定义和用法 getContext() 方法返回一个用于在画布上绘图的环境. 语法 Canvas.getConte ...

  7. HTML5中canvas的save和restore方法

    canvas的save和restore方法: save() 方法把当前绘画状态的一份拷贝压入到一个保存图像状态的栈中.这里的绘画状态指坐标原点.变形时的变化矩阵(该矩阵是调用 rotate().sca ...

  8. 第八讲：HTML5中canvas实现小球击打小方块游戏

    源码:http://download.csdn.net/detail/liumingm900913/7469969 游戏开发流程: 1.创建画布: 将画布放在div标签里面,这样能够控制画布居中的位置 ...

  9. 【html5】HTML5中canvas怎样画虚线

    在canvas API中,我们发现仅仅提供了画实线的方法实现,并没有虚线的相关方法,那么怎样实现画虚线呢? 现实中,虚线是由一小段小段的实线线段组成,那么仅仅要我们通过画出等长度的线段就能够组成我们想 ...

随机推荐

  1. Objective-C 继承与类

    创建: 2018/01/20 完成: 2018/01/21 更新: 2018/01/22 标题前增加 [Objective-C]  继承的概念  父类与子类 ●继承: 继承其他类 ●父类: 被继承的类 ...

  2. GitHub中有关已建仓库及上传项目文件的删除

    上传了项目,竟然发现找不到删除的地方,真是囧... 1. 已建仓库的删除 点击 settings,进入以下界面,点击箭头指向的按钮 进入以下界面 2. 某个文件的删除 直接点开文件,在右上角有个删除工 ...

  3. bzoj 1643: [Usaco2007 Oct]Bessie's Secret Pasture 贝茜的秘密草坪【枚举】

    4维枚举平方小于10000的数,相加等于n则ans++ #include<iostream> #include<cstdio> using namespace std; con ...

  4. selenium对51job进行职位爬虫

    selenium 爬虫流程如下: 1.对某职位进行爬虫 ---如:自动化测试 2.用到IDE为 pycharm 3.爬虫职位导入到MongoDB数据库中 4.在线安装 pip install pymo ...

  5. Codefoces 828C

    C. String Reconstruction time limit per test 2 seconds memory limit per test 256 megabytes input sta ...

  6. 递推 Codeforces Round #186 (Div. 2) B. Ilya and Queries

    题目传送门 /* 递推:用cnt记录前缀值,查询区间时,两个区间相减 */ #include <cstdio> #include <algorithm> #include &l ...

  7. [译]libcurl错误码

    CURLcode Almost all "easy" interface functions return a CURLcode error code. No matter wha ...

  8. 网站开发综合技术 三 JavaScript的DOM操作

    第3部分 JavaScript的DOM操作 1.DOM的基本概念 DOM是文档对象模型,这种模型为树模型:文档是指标签文档:对象是指文档中每个元素:模型是指抽象化的东西. 2.Windows对象操作 ...

  9. 什么是2MSL以及TIME_WAIT的作用

    TIME_WAIT主要是用来解决以下几个问题: 1)上面解释为什么主动关闭方需要进入TIME_WAIT状态中提到的: 主动关闭方需要进入TIME_WAIT以便能够重发丢掉的被动关闭方FIN包的ACK. ...

  10. datagrid 选中某行，翻页再翻回来，发现选中的行没有选中

    不管有没有设置复选框,其实都是一样的,都是idField属性没有设置,加上去即可. $(function(){ $('#dg').datagrid({ url:'ContactServlet', to ...