我们先看看画布的魅力：
初始画布
canvas默认是宽300px，高150px;
绘制步骤
1.定义一个id
<canvas id="canvasOne" width="300" height="300"></canvas>
2.获取canvas对象
var canvasObj = document.getElementById('canvasOne');
3.通过getContext获取上下文
var context = canvasObj.getContext("2d");
目前支持2d绘图
4.通过javascript进行绘制
context.fillStyle = "red";
设置样式为红色
context.fillRect(125, 125, 50, 50);
，y坐标为125的地方绘制一个长为50宽为50的正方形
绘制案例
常见几何
绘制直线
绘制300*300画布的对角线
beginPath()
开始绘制
moveTo(x,y)
直线起点
lineTo(x,y)
直线终点
stroke()
绘制直线
<canvas id="canvasOne" width="300" height="300"></canvas>
<script type="text/javascript">
var canvasObj = document.getElementById('canvasOne');
var context = canvasObj.getContext("2d");
//context.strokeStyle = "#ff6a00";
context.beginPath();
context.moveTo(0, 0);
context.lineTo(300, 300);
context.stroke();
context.moveTo(0, 300);
context.lineTo(300, 0);
context.stroke();
</script>
绘制矩形
在画布中间绘制一个100*的矩形
绘制
strokeStyle
strokeRect(x,y,w,h)
填充
fillStyle
fillRect(x,y,w,h)
<canvas id="canvasOne" width="300" height="300"></canvas>
<script type="text/javascript">
var canvasObj = document.getElementById('canvasOne');
var context = canvasObj.getContext("2d");
context.strokeStyle = 'rgb(100%,0%,100%)';
context.strokeRect(100, 125, 100, 50);
</script>
绘制圆形
绘制300*300画布的内切圆
beginPath()
开始绘制路径
arc(x, y, r, s, e, b)
x，y 坐标这次是代表圆心
r 代表半径
s 代表开始弧度
e 代表结束弧度
b 代表是否逆时针方向画图
默认顺时针
closePath()
结束绘制路径
扩充案例
fill()
填充
<canvas id="canvasOne" width="300" height="300"></canvas>
<script type="text/javascript">
var canvasObj = document.getElementById('canvasOne');
var context = canvasObj.getContext("2d");
context.fillStyle = 'rgb(0,50,0)';
context.beginPath();//开始绘制路径
context.arc(150, 150, 150, 0, Math.PI * 2,true);//注意：x，y 坐标这次是代表圆心
context.closePath();//结束绘制路径
context.fill();//填充
</script>
绘制弧线
context.closePath();
路径不闭合的时候会自动画一条直线（代码看注释）
<canvas id="canvasOne" width="300" height="300"></canvas>
<canvas id="canvasTwo" width="300" height="300"></canvas>
