1. canvas元素基础
canvas元素是HTML5中新增的一个重要元素，专门用来绘制图形。
在页面中使用canvas元素绘制图形需要经过的三个步骤：
步骤一 使用canvas元素创建一个画布区域，并获取该元素。
步骤二 通过获取的canvas元素，取得该图形元素的上下文环境对象。
步骤三 根据取得的上下文环境对象，在页面中绘制图形或动画。
1.1 页面添加canvas元素
<canvas id="cnvMain" width="500" height="300"></canvas>
1.2 绘制矩形
使用canvas元素绘制矩形的步骤：
1> 获取canvas元素
使用document.getElementById()方法获取canvas对象，需要调用这个对象提供的方法来进行图形绘制。
2> 获取上下文（context）
进行图形绘制时，需要使用图形上下文（graphics context），图形上下文是一个封装了绘图功能的对象。使用canvas对象的getContext()来获得图形上下文。在draw函数中，将参数设置为“2d”。
3> 填充与绘制边框
canvas元素绘制图形的两种方式：填充（fill）与绘制边框（stroke），填充是指填满图形内部，绘制边框是绘制图形的边框。canvas元素结合使用这两种方式来绘制图形。
4> 设置绘图样式（style）
在进行绘制图形时，先要设定好绘图的样式，再调用方法进行图形绘制。
设定填充图形样式：fillStyle填充的样式，在该属性中填入填充的颜色值。
设定图形边框的样式：strokeStyle图形边框的样式，在该属性中填入边框的颜色值。
5> 指定线宽
使用图形上下文对象的lineWidth属性设置图形边框的宽度。在绘制图形的时候，任何直线都可以通过lineWidth属性来指定直线的宽度。
6> 指定颜色值
绘图时填充的颜色或边框的颜色分别通过fillStyle属性与strokeStyle属性来指定。颜色值使用CSS中使用的颜色值。
7> 绘制矩形
分别使用fillRect()与strokeRect()来填充矩形和绘制矩形边框。
context.fillRect(x, y, width, height) context.strokeRect(x, y, width, height)
HTML代码
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<script type="text/javascript">
window.onload = function () {
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
context.fillStyle = "#EEEEFF";
context.fillRect(0, 0, 500, 300);
context.fillStyle = "red";
context.strokeStyle = "blue";
context.lineWidth = 1;
context.fillRect(50, 50, 100, 100);
context.strokeRect(50, 50, 100, 100);
}
</script>
</head>
<body>
<canvas id="canvas" width="500" height="300"></canvas>
</body>
</html>
效果图
