画布的3维绘图
在写本书的时候，浏览器的供应商刚开始着手给canvas标签添加
3维的的绘图功能。这个应用叫做WebGL,是javascript绑定到OpenGL里的一个标准应用。为了获得3D绘图的对象，需要把webgl这个字符串传送到上面提到的getContext()方法里。由于WebGL应用是一种庞大的、多功能并且低阶的应用，本书不在多做说明。一般网站开发者更多是用基于WebGL的类库，而不是直接使用WebGL。
举一个应用canvas接口的范例，下面的代码为我们在画布上绘制了一个红色的方形和一个蓝色的圆，如图1-1所示：
<body>
This is a red square:
<canvas id="square" width=10 height=10></canvas>.
This is a blue circle:
<canvas id="circle" width=10 height=10></canvas>.
<script>
// Get first canvas element and its context
var canvas = document.getElementById("square");
var context = canvas.getContext("2d");
// Draw something in the canvas
context.fillStyle = "#f00"; // Set color to red
context.fillRect(0,0,10,10); // Fill a small square
// Get second canvas and its context
canvas = document.getElementById("circle");
context = canvas.getContext("2d");
// Begin a path and add a circle to it
context.beginPath();
context.arc(5, 5, 5, 0, 2*Math.PI, true);
context.fillStyle = "#00f"; // Set blue fill
context.fill(); // Fill the path
</script>
</body>
Figure 1-1. Simple canvas graphics
canvas应用把复杂的形状拆分成多条可以填充、绘制的线。这样一些线段的连接方式可以通过在绘图之先调用一系列的方法来定义实现，例如beginPath()和 arc()方法。一旦这些线条的轨迹确定，可以使用fill()等方法改动画布的内容。对象不同的属性，比如fillStyle，限定了这些操作的表现形式。下面有更详细的操作说明：
1.如何设定路线轨迹、如何绘制、“描绘”这些轨迹的轮廓以及如何填充外轮廓的内部
2.如何设定、修改canvas对象的图像属性，如何保存当前属性的值
3.如何设置画布的大小、默认的画布坐标系统以及如何转换当前的坐标
4.canvas应用的多种绘线方法
5.某些特定的用于绘制矩形区域的方法
6.如何设置色度，还有透明度以及色彩的渐变、图像的重叠方式
7.调节线宽、终点和顶点
8.如何在画布上显示文本
9.如何“修剪”图形，使之完全落于某特定的区域中
10.如何给图形加上阴影
11.如何以任意的比例在画布上显示图像以及提取画布上绘制的内容
12.如何控制像素合成的过程（新设定的像素和原画布存在的像素的叠加）
13.如何通过设置色度(红绿蓝),来改变画布的像素
14.如何在画布区域判断鼠标事件的触发
1162
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
