一、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. LVS的持久连接、会话保持和高可用介绍

    持续连接 1)持久连接(lvs persistence)模板: 实现无论使用任何调度算法,在一段时间内(默认360s),能够实现将来自同一个地址的请求始终发往同一个RS ipvsadm -A|E -t ...

  2. Python基础 — NumPy

    NumPy--简介  Numpy(Numerical Python的简称)是一个由多维数组对象和用于处理数组的例程集合组成的库.  Numpy内部解除了Python的PIL(全局解释器锁),运算效率极 ...

  3. bzoj 4300: 绝世好题【dp】

    设f[i][j]表示数列到i为止最后一项第j位为1的最大子序列长度,每次从i-1中1<<j&a[i]!=0的位+1转移来 然后i维是不需要的,答案直接在dp过程中去max即可 #i ...

  4. n阶完全生成图的数量

    有些事不是看到了希望才去坚持,而是坚持了才会看到希望 问题 I: 星际之门(一) 时间限制: Sec 内存限制: MB 提交: 解决: [提交][状态][讨论版] 题目描述 公元3000年,子虚帝国统 ...

  5. 选择语言之switch case

    程序语言-选择语言之switch   case 多选一,类似if    else if  else if  else 模版: Switch(选择条件) { Case(条件一)//相当于if Conso ...

  6. IDEA 导入maven项目，显示：nothing to show

    问题描述: IDEA 导入maven项目,import project,默认下一步,直到Select Maven projects to import界面无选项,提示:nothing to show ...

  7. jboss项目设置域名

    1.在jboss-web.xml中添加<virtual-host>www.ceshi.com</virtual-host> <jboss-web> <cont ...

  8. MSSQLSERVER_3176

    本文档已存档,并且将不进行维护. MSSQLSERVER_3176                 SQL Server 2014                    SQL Server 2012 ...

  9. unbuntu系统:python2.7安装pyspark

    以前在进行搜索引擎rank-svm排序模型训练时,直接使用python读取的HDFS日志文件.统计计算等预处理操作再进行svm模型,最终产生出训练模型.现在回想一下,数据预处理这一块完全可以使用spa ...

  10. java如何区分同时继承的父类和实现的接口中相同的方法

    基类代码: public class Father { public Father() { System.out.println("基类构造函数{"); show(); Syste ...