1.1 什么是 HTML5
HTML 5是近十年来Web开发标准最巨大的飞跃。和以前的版本不同，HTML 5并非仅仅用来表示Web内容，它的新使命是将Web带入一个成熟的应用平台，在HTML 5平台上，视频，音频，图象，动画，以及同电脑的交互都被标准化。 HTML5 是继 HTML4.01, XHTML 1.0 和 DOM 2 HTML 后的又一个重要版本，旨在消除Internet 程序（RIA）对 Flash， Silverlight，JavaFX一类浏览器插件的依赖。除了原先的DOM接口，HTML5增加了更多API，如：
· 本地音频视频播放；
· 动画； · 地理信息；
· 硬件加速；
· 本地运行(即使在 Internet 连接中断之后)；
· 本地存储；
· 从桌面拖放文件到浏览器上传；
· 语义化标记。
那些支持 HTML5 的浏览器在处理 HTML 代码错误的时候必须更灵活，而那些不支持 HTML5 的浏览器将忽略 HTML5 代码。 在新增的特性中最令人眼前一亮的就是canvas元素，而本文将会深入介绍这个特性，解开canvas的神秘面纱。
1.2 Canvas的起源
Canvas是在浏览器上绘图的一种机制。传统的网页，总是使用GIF或者JPEG来显示图像，这种图形是需要事先画好，“静态”的图像；随着各种要求的发展，使用Flash或Java的“动态”图像也出现了。而Canvas，则是不使用Flash和Java，而是用Javascript的一种绘图手段。 Canvas最初是由Apple发展，Apple、Mozilla、Opera共同成立了WHATWG，并制定Web Applications规则。这个规则就是HTML5的蓝本。 Canvas元素完全不需要任何外部插件就能够运行，只需要使用HTML并使用2D渲染上下文API编写一些javascript代码。
1.3 认识canvas元素
Canvas元素的用法很简单，只需要添加下面的代码：
<canvas width=”500” height=”500”>
<!--在此插入后备内容-->
</canvas>就是这么简单，你已经在使用canvas元素了。虽然这段代码实际上并没有什么特殊的效果，但不要着急，后面会介绍如何在这块画板上添加各种图形。
1.4 2D渲染上下文
canvas元素并非Canvas中最强大的部分，真正的关键部分是2D渲染上下文，这是真正绘制图形的地方。canvas元素的用途只是作为2D渲染上下文的包装器，所以需要强调一下：绘图是在2D渲染上下文中进行的，而不是在canvas元素中进行。
1.4.1 坐标系统
2D渲染上下文是一种基于屏幕的标准绘制平台。与其他2D平台类似，它采用平面的笛卡尔坐标系统，左上角为原点(0,0)。
如下图所示。
坐标系统的1个单位通常相当于屏幕上的1个像素。
1.4.2 访问2D渲染上下文
先创建只有一个空白canvas元素的简单HTML网页：
<!DOCTYPE html>
<html>
<head>
<title>learn canvas</title>
<meta charset=”utf-8”>
<script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js”></script>
<script type=””text/javascript”>
$(document).ready(function()){
});
</script>
</head>
<body>
<canvas id=”myCanvas” width=”500” height=”500”>
</canvas>
</body>
</html> 在这里需要引入jquery，帮助我们更快速地使用javascript开发程序。将下面的语句放到$(document).ready函数中。
var canvas = $(“#myCanvas”); var context = canvas.get(0).getContext(“2d”);这段代码中，使用jquery获得canvas对象，然后通过调用getContext方法得到2D渲染上下文赋值给context。 有了包含2D渲染上下文的变量后，最令人激动的时刻到来了，在上下文变量声明语句之后添加下面这行代码：
context.fillRect(40,40,100,100);刷新页面，会出现一个黑色的矩形。如下所示：
1.5 绘制基本图形和线条
绘制一个正方形是非常简单的，只需要一行代码，即调用fillRect方法：
context.fillRect(40,40,100,100);
context.fillRect(x,y,width,height);
1.5.1 线条
绘制线条与绘制图形有一些区别，实际上应该成为路径。要绘制一个简单的路径，首先必须在2D渲染上下文中调用beginPath方法，代表：“准备，要开始画路径了”。接下来调用moveTo方法，设置要绘制路径的原点坐标(x,y)；然后调用lineTo方法设置线条的终点坐标(x,y)，最后调用closePath完成路径的绘制和stroke绘制轮廓，显示线条。如下面代码所示：
context.beginPath();
context.moveTo(40,40);
context.lineTo(340,40);
context.closePath();
context.stroke();
如果想绘制斜线，只需要修改lineTo方法的坐标(x,y)参数
context.lineTo(340,340);
结果如下图所示：
直线本身并没有什么特别的，但是通过组合，它们能够产生复杂且令人惊奇的图形。
1.5.2 圆形
圆形是一个非常复杂的形状，因此canvas实际上并没有专门绘制圆形的方法，但是有一个绘制圆弧的方法，圆弧实际上是圆形的组成部分—首尾相连的圆弧就是圆形。 在canvas中创建一个圆形代码如下：
context.beginPath();
context.arc(230,90,50,0,Math.PI*2,false);
context.closePath();
context.fill();
效果如下图所示：
创建一个圆弧需要6个参数：圆弧原点的(x,y)坐标值、圆弧半径、开始角度、结束角度和一个布尔值，如果圆弧按逆时针方向绘制，那么它为true，否则它为false。
context.arc(x, y, radius, startAngle, endAngle, anticlockwise);
一定要注意，Canvas中的角度是以弧度而不是角度为单位的，简单地说，360度是2*PI弧度。
如果想画一个半圆可以使用如下代码：
context.arc(230,90,50,0,Math.PI,false);
1.6 样式
上面的例子全是黑色，是否有些单调，通过设置2D渲染上下文的fillStyle属性，能够修改形状和路径的填充颜色。可以使用“rgb(红、绿、蓝)”颜色值，也可以使用任何有效的CSS颜色值或单词（如“red”）。
使用下面的代码将绘制2个红色正方形，1个黑色正方形。
context.fillStyle=”rgb(255,0,0)”;
context.fillRect(40,40,100,100); //红色正方形
context.fillRect(180,40,100,100); //红色正方形
context.fillStyle=”rgb(0,0,0)”;
context.fillRect(320,40,100,100); //黑色正方形效果如下图:
还可以再描边图形和路径上使用strokeStyle属性实现变色效果。下面的代码与前一个例子相同，唯一区别是它使用笔画描边而不是填充：
context.strokeStyle=”rgb(255,0,0)”;
context.strokeRect(40,40,100,100);
context.strokeRect(180,40,100,100);
context.strokeStyle=”rgb(0,0,0)”;
context.strokeRect(320,40,100,100);效果如图所示：
修改线宽
Canvas有一个方法可以增加线宽，即2D渲染上下文的lineWidth属性。lineWdith属性的默认值为1，但是可以将它修改为任意值。
例如，修改红线和黑线的宽度：
context.lineWidth=5; //加粗线条
context.strokeStyle=”rgb(255,0,0)”;
context.beginPath();
context.moveTo(40,180);
context.lineTo(420,180); //红线
context.closePath();
context.stroke();
context.lineWidth=20; //进一步加粗线条
context.strokeStyle=”rgb(0,0,0)”;
context.beginPath();
context.moveTo(40,220);
context.lineTo(420,220); //黑线
context.closePath(); context.stroke();其结果是得到一条稍粗的红线和一条非常粗的黑线，如图所示：
1.7 绘制文本
Canvas不仅能绘制图形，还能够显示文本。Canvas中的文本是以图像形式绘制的，这意味着它无法像HTML文档中的普通文字一样用鼠标指针选取—它实际不是文本，只是像文本而已。
2D渲染上下文的fillText可以绘制文本，它接受4个参数，第一个参数是准备绘制的文本，第二个和第三个参数是文本原点（左下角）的(x,y)坐标值，第四个参数是可选项，文本的最大宽度。
代码如下所示：
var text=”Hello, world!”;
context.font=”30px serif”; //修改字号和字体
context.fillText(text, 40, 40);效果如下所示：
1.8 擦除Canvas
在Canvas上绘制确实是很有趣的事情，但是当你画错了或者想要清除画布和绘制其他图形时，就需要擦除画布，有两个方法可以使用：clearRect方法以及宽度高度技巧。
clearRect方法
clearRect方法接受4个参数，前两个是原点坐标(x,y)、后两个是宽度和高度。Canvas中的对象是可以被部分擦除的，代码如下:
context.fillRect(40,40,100,100);
context.beginPath();
context.arc(230,90,50,0,Math.PI*2,false);
context.closePath();
context.fill();
context.clearRect(230,90,50,50);
宽度/高度技巧
如果只是想要擦除Canvas上的所有内容，并从零开始绘画，可以使用宽度/高度技巧。这实际上并不是一种技巧，而是一种将Canvas重置为默认新状态的方法，每当重新设置一个canvas元素的width和height属性时，Canvas都会自动清除内容并返回其原始状态。
宽度/高度技巧的缺点是，它会完全重置Canvas上的所有内容，包括样式和颜色。所以，只有准备完全重置Canvas，而不仅仅是清除内容时，才能使用这种方法。
735
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
