nvas是定义在浏览器上的画布。它不仅仅是一个标签元素更是一个编程工具是一套编程的接口。利用它可以开发出很多东西，比如动画，游戏，动态的图表等富有变现力和感染力的应用。还可以开发出绚丽的3D动态效果。接下来我们一起学习！
一、 创建canvas
1 2 3 4 5 6 7 8 canvas基础 9 10 11 12 13 14 15 看一下现在的效果:
除了上述代码那样指定canvas的宽高，还可以在js中这样指定:
1 var canvas = document.getElementById('canvas');2 3 canvas.width = 700;4 canvas.height = 400;这样边框内就是一个画布了，接下来我们就可以在这画布里进行绘制了。
二 、 画一条线段
1 看一下效果图:
三 、 画一个三角形并着色
1 效果图:
四 、 绘制两个图形
1 效果图:
五 、 绘制一个七巧板
1 效果图:
六 、 绘制一段弧
1 context.arc各参数的含义:
1 context.arc(2 centerx , //圆心的x轴坐标位置3 centery, //圆心的y轴坐标位置4 radius, //圆弧半径的值5 startingAngle, //以哪个弧度制开始6 endingAngle, //在哪个弧度制结束7 anticlockwise=false //顺时针方向绘制,为true则逆时针。默认为顺时针。8 )效果图:
改为逆时针的话，在context.arc里面添加参数true
context.arc(300, 300, 200, 0, 1.5 * Math.PI,true);效果图:
七 、 绘制多段弧 和 着色
1 效果图:
可以看出绘制多个弧也是使用beginPath()和closePath()。但是绘制出来的弧自动的把首尾连接起来了，成了一个封闭的弧。这是因为closePath()的原因，如果想只是展示不封闭的弧，只需要把context.closePath()这段代码去掉就行。beginPath()和closePath()并不一定成对出现。填充的时候，有closePath()和没有closePath()效果是一样的。
