1.1 概述
Canvas是HTML5中新增的一个元素，它就像一块画布，可以用JavaScript在上面绘制各种图表、动画、制作游戏等。
在没有Canvas的年代，绘图只能借助Flash插件实现，页面不得不用JavaScript和Flash进行交互。有了Canvas，我们就再也不需要Flash了，直接使用JavaScript完成绘制。
2.1 HelloWorld
<canvas>是一个标签，有一个默认的宽度，不需要了解。此时注意，如果我们要设置宽度、高度，必须设置在HTML标签上面，而不能设置在CSS上。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Canvas画布 - HelloWorld</title>
<style type="text/css">
canvas {
border: 1px solid gray;
}
</style>
</head>
<body>
<canvas id="myCanvas" width="600" height="300"></canvas>
</body>
</html>
我们必须使用JavaScript来控制Canvas渲染各种东西：
<script>
// 使用DOM方法得到画布
var myCanvas = document.getElementById("myCanvas");
// 使用画布的上下文
var ctx = myCanvas.getContext("2d");
// 画各种东西，用ctx打点调用方法，而不是myCanvas
ctx.fillRect(50, 50, 300, 50);
</script>
设置后的效果如下图：
上面的例子中，我们就学习了两个API：
myCanvas.getContext("2d");
get表示得到，context是上下文的意思。
canvas起初是空白的。为了展示，首先脚本需要找到渲染上下文，然后在它的上面绘制。<canvas>元素有一个做getContext()的方法，这个方法是用来获得渲染上下文和它的绘画功能。getContext()只有一个参数，上下文的格式。
ctx.fillRect(x,y,w,h)
fill是填充的意思，rect是rectangle矩形。填充一个矩形。
注意事项：
(1)、canvas的ctx对象，非常重要所有的绘制都是ctx的方法。
<script>
// 使用DOM方法得到画布
var myCanvas = document.getElementById("myCanvas");
//使用画布的上下文
var ctx = myCanvas.getContext("2d");
// 画各种东西，用ctx打点调用方法，而不是myCanvas
ctx.fillRect(50, 50, 300, 50);
// canvas所有的绘制API都是基于ctx的事情，而不是canvas对象
ctx.fillStyle = "lightgreen";
ctx.beginPath();
ctx.arc(250, 250, 100, 0, Math.PI * 2, true);
ctx.fill();
ctx.closePath();
</script>
(2)、canvas的坐标系
(3)、canvas兼容到IE9
评论前必须登录！
注册