2011/07/25 20:56 
大部分内容翻译整理自《HTML5&CSS3 in the real world》（by Alexis Goldstein, Louis Lazaris, and Estelle Weyl, Copyright © 2011 SitePoint Pty. Ltd.）一书中的第11章。
通过JS和canvas，我们现在可以在web上画出很多有趣和有用的东西。这里的内容仅限于Canvas 2D绘图。
按照当前（2011年7月）的情况，支持Canvas 2D绘图的浏览器有：
- Safari 2.0+
- Chrome 3.0+
- Firefox 3.0+
- Internet Explorer 9.0+
- Opera 10.0+
- iOS (Mobile Safari) 1.0+
- Android 1.0+
canvas和SVG的比较
canvas的特点：
- 可以进行像素级操作；
- 一次成型，不可以动态修改。如果要对已有的canvas进行修改，必须重绘；（canvas使用immediate mode）
- 不能通过DOM模型访问canvas中的内容；
- 可以将canvas的内容保存成PNG或JPEG文件；
SVG的特点：
- 可以通过DOM模型访问SVG的内容；（SVG使用retained mode）
- 目前你可以使用一些工具来生成SVG（例如Raphaël library和Inkscape）；
- 和canvas相比，SVG可被当作是一种文件格式而不是一些列用来绘图的方法；
- 不可进行像素级操作；
总的来说，如果和Flex相对应，canvas类似于bitmap和bitmapData，用于位图处理；SVG类似于Sharp/Sprite等，用于矢量图处理和事件操作等。
canvas绘图的一般方法
<!DOCTYPE html>
<html lang="en">
<head>
<script src="jquery.js"></script>
<script>
// 这里我使用jquery的方法让document加载完成之后再执行
// 也可以直接写在body的onload或类似的方法之内
$(document).ready(function(){
draw();
});
function draw()
{
// 获取canvas及其context
// 基于webGL的支持，将来可能会有3D的context支持
// 不过目前浏览器对webGL的支持似乎并不理想
var canvas = document.getElementById("can");
var context = canvas.getContext("2d");
// 绘制颜色填充
context.strokeStyle = "red"; // 设定填充边框的颜色
context.fillStyle = "rgba(0, 0, 255, 0.5)"; // RBGA值，red，blue，green，alpha
// 也可以使用RGB值，即没有alpha
context.fillRect(10,10,100,100); // 绘制填充，和Flex的rectangle不同，这里的值依次是：x0, y0, x1, y1。后两个值不是width和height。
context.strokeRect(120,10,100,100); // 绘制边框，同上
// 绘制过渡填充
var g = context.createLinearGradient(300, 300, 300, 500); // x0, y0, x1, y1
// 注意，这里的过渡值设定的范围是按照整个canvas来确定的
// 而不是针对要绘制的区域。
// 方法createRadialGradient(x0, y0, r0, x1, y1, r1);可用来绘制放射过渡填充
g.addColorStop(0, "blue");
g.addColorStop(1, "red");
context.fillStyle = g;
context.fillRect(300, 300, 200, 200);
// 绘制弧度路径。canvas没有提供绘制圆的方法，用这个绘制弧度的方法来绘制圆。
context.beginPath();
// arc用来设定路径属性
context.arc(50, 50, 30, 0, Math.PI * 2, true); // x, y, radius, startAngle, endAngle, anticlockwise
context.closePath();
context.strokeStyle = "red";
context.fillStyle = "blue";
context.lineWidth = 3;
context.fill(); // 用设定的style直接填充path
context.stroke(); // 同上，直接绘制边框
// 添加文字
canvas.style.backgroundColor = "transparent";
context.fillStyle = "blue";
context.textAlign = "left";
context.font = "24px Georgia, Verdana";
// 后两个参数是文字的起始坐标。
context.fillText("some words to display", 50, 20);
// 用图片填充
var img = new Image();
img.src = "E2.jpg";
img.onload = function()
{
var p = context.createPattern(img, "repeat");
context.fillStyle = p;
context.fillRect(100, 100, 200, 200);
}
}
</script>
<style>
#can
{
border: dotted 2px black;
}
</style>
</head>
<body>
<!-- 创建canvas标签是必须的 -->
<canvas id="can" width="500" height="500">
<!--
这里可以添加一些提示信息
如果用户的浏览器不支持canvas
这的文字就将被显示出来以提醒用户
-->
not support
</canvas>
</body>
</html>
