Canvas是用于在Web画面中绘制位图的技术。当HTML4版本的网页中需要绘制图形时，必须使用Flash等插件，在有了Canvas以后，就在也不需要任何插件，只需要JavaScript就可以在页面上绘制图形了。
Canvas进行绘制的基本步骤
（1）取得Canvas对象
（2）从Canvas对象中获取绘图用的上下文
（3）使用上下文中的方法与属性进行绘制
1、获取Canvas对象，为了能从JavaScript中使用<canvas>标签，在<canvas>标签中追加id属性。
例如：
<canvas id="canvas" width="300" height="300"></canvas>接着再使用document.getElementById()方法获取该canvas对象
<script>
var canvas=document.getElementById("canvas");//获取id属性为canvas的标签
</script>2、获取Canvas对象绘图使用的上下文
仅仅取得Canvas对象是无法进行图形绘制的。要进行图形绘制，还必须由Canvas对象中取得绘图用的上下文（context）。直观的来说，Canvas对象就相当于绘图用的白纸，而上下文就相当于绘图用的画笔。
例如：将上下文种类指定为“2d”（二维图形）
var ctx=canvas.getContext("2d");//指定为二维图形3、使用上下文的方法与属性进行绘图（在后续中会介绍到）
例如:指定颜色时使用fillStyle属性，绘制矩形时使用fillRect()方法等
ctx.fillStyle="rgb(255,0,0)";//指定填充颜色
ctx.fillRect(50,50,200,200);//绘制矩形
简单的程序案例
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>绘制矩形</title>
<script type="text/javascript">
window.onload=function(){
//Canvas对象的取得
var canvas=document.getElementById("canvas");
//取得绘图用的上下文对象
var ctx=canvas.getContext("2d");
//绘图处理
ctx.fillStyle="rgb(255,0,0)";
ctx.fillRect(50,50,200,200);
ctx.fillStyle="rgb(0,0,255,0.5)";
ctx.fillRect(100,100,200,200);
}
</script>
</head>
<body>
<canvas id="canvas" width="400" height="400"></canvas>
</body>
</html>
Canvas路径
路径是Canvas的图形绘制的基础。所谓的路径就是通常所说的“一笔绘图”的形式。在Canvas中，通过多次重复路径来绘制更复杂的图形。
绘制路径的基本步骤：
（1）取得Canvas绘图用的上下文
（2）调用beginPath()方法宣布路径绘制的开始
（3）使用moveTo()、lineTo()方法依次指定坐标与绘制直线
（4）调用closePath()方法结束路径结束
（5）调用fill()方法进行图形绘制
绘制一个简单的三角形：
（填充）
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>绘制三角形</title>
<script type="text/javascript">
window.onload=function(){
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
//路径绘制开始
ctx.beginPath();
//路径的绘制
ctx.moveTo(0,0);
ctx.lineTo(0,200);
ctx.lineTo(200,200);
//路径绘制结束
ctx.closePath();
//进行绘图处理
ctx.fillStyle="rgb(200,0,0)";
ctx.fill();
}
</script>
</head>
<body>
<canvas id="canvas" width="400" height="3000"></canvas>
</body>
</html>
（非填充）
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>绘制三角形(非填充)</title>
<script type="text/javascript">
window.onload=function(){
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
//路径绘制开始
ctx.beginPath();
//路径的绘制
ctx.moveTo(0,0);
ctx.lineTo(0,200);
ctx.lineTo(200,200);
//路径绘制结束
ctx.closePath();
//进行绘图处理
ctx.strokeStyle="#aa0000";//指定路径颜色
ctx.lineWidth=2;//指定路径线的粗细
ctx.stroke();//绘制路径
}
</script>
</head>
<body>
<canvas id="canvas" width="400" height="3000"></canvas>
</body>
</html>
进行路径绘制的各种方法：
| 方法 | 功能 |
| beginPath() | 重置路径的开始 |
| closePath() | 关闭到现在为止的路径 |
| moveTo(x,y) | 指定绘图开始时的基点（x,y） |
| lineTo(x,y) | 绘制从前一次绘图位置到（x,y）的直线 |
| 方法 | 功能 |
| stroke() | 绘制路径 |
| fill() | 填充路径 |
| fillStyle | 指定填充时使用的颜色与样式 |
| strokeStyle | 指定路径的线颜色与样式 |
| lineWidth | 指定路径线的粗细，属性值为整数 |
------>>后续《Canvas画布进阶篇》