一、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. 【Linux】小米路由开启SSH访问权限

    一.验证小米路由ROM是否为开发版 1.  登录小米路由Web管理页面,检查ROM版本是否为开发版(若为开发版直接跳至第二步,若为稳定版继续本步骤). 2. 进入小米路由器官网(http://www1 ...

  2. 洛谷P4887 第十四分块(前体)（二次离线莫队）

    题面 传送门 题解 lxl大毒瘤 我们考虑莫队,在移动端点的时候相当于我们需要快速计算一个区间内和当前数字异或和中\(1\)的个数为\(k\)的数有几个,而这个显然是可以差分的,也就是\([l,r]\ ...

  3. P4451 [国家集训队]整数的lqp拆分

    #include <bits/stdc++.h> using namespace std; typedef long long LL; inline LL read () { LL res ...

  4. C#上机作业及代码Question2

    第二题某文件名为"*.txt",其中*可能由若干个英文单词组成.将此文件名改为"*.dat",并且单词之间用下划线连接,例如: helloworld.txt,改 ...

  5. 贪心+优先队列 HDOJ 5360 Hiking

    题目传送门 /* 题意:求邀请顺序使得去爬山的人最多,每个人有去的条件 贪心+优先队列:首先按照l和r从小到大排序,每一次将当前人数相同的被邀请者入队,那么只要能当前人数比最多人数条件小,该人能 被邀 ...

  6. working hard to be a professional coder

    1:read 2 : code 3 : 勤奋 4:技术栈 就前端主流技术框架的发展而言,过去的几年里发展极快,在填补原有技术框架空白和不足的同时也渐渐趋于成熟.未来前端在已经趋向成熟的技术方向上面将会 ...

  7. Java 8 (6) Stream 流 - 并行数据处理与性能

    在Java 7之前,并行处理集合非常麻烦.首先你要明确的把包含数据的数据结构分成若干子部分,然后你要把每个子部分分配一个独立的线程.然后,你需要在恰当的时候对他们进行同步来避免竞争,等待所有线程完成. ...

  8. ASP.NET XML文件

    XML是一种标记语言,具有描述所有已知和未知数据的能力.XML扩展性比较好,可以为新的数据类型制定新的数据描述规则,作为对标记集的扩展. XML的特点: 1.XML数据可以跨平台使用并可以被人阅读理解 ...

  9. 自定义封装 banner 组件

    1. 效果图预览 2.基本功能 一个简单方便的轮播图组件,基于viewpager 基础上进行的封装.可设置 项目中图片,网络图片, View:支持循环自动播放,手势滑动切换,item点击事件,可设置 ...

  10. http链接中请求进行编码，Http请求

    如果参数中含有特殊字符&,则强制URL编码<br> http协议中参数的传输是"key=value"这种简直对形式的,如果要传多个参数就需要用“&”符号 ...