上节课中我们将canvas的dom渲染了出来，但是没有做任何操作。这一节我要学习在canvas上操作，同时画一些简单的东西，比如线条。
首先，我们需要获取渲染上下文。
如下：
<canvas id="myCanvas" width="400" height="400"></canvas>
<script>
var canvas = document.getElementById('myCanvas')
var ctx = canvas.getContent('2d')
</script>
在上面的javaScript代码中,第一行用来获取canvas元素的dom对象。
第二行利用canvas对象的getContent()方法来获得canvas渲染上下文和绘画功能。ge tContent()方法只有一个参数“2d”，这样我们就可以在canvas上绘制平面图形来。
为了避免碰上不支持canvas的浏览器（虽然现在这种浏览器已经很少了，尤其是在移动设备上），我们可以提前检查canvas对象中是否有getContenxt方法，如果没有，就是不支持，如下。
<script>
var canvas = document.getElementById('myCanvas')
if (canvas.getContext) {
var ctx = canvas.getContext('2d')
} else {
window.console.log('此浏览器不支持canvas')
}
</script>
这样，用canvas进行绘画的基本材料我们就已经准备全了，下面就可以开始绘画了。
要想用canvas绘制一条直线，我们首先得记住得记住4个方法,后面我们提到的所有方法都是基于所获得的绘画上下文。
- moveTo(x, y)。这个方法是是利用canvas进行绘画的第一步，不管后面想绘制什么，都得有它，不然你是画不出来的。为什么这么说呢？把它放到真实环境中做个类比的画就是，在一张画纸上，你得先把画笔接触到画纸，才能继续画，不然你就是在空气中瞎比划了。
- lineTo(x,y)。下笔后将画笔一拉，停下来的一个点。
- stroke()。给绘制出来的线条上色。在现实生活中，我们的笔上是直接带色的，落笔既成，但在canvas上，你还需要落笔后告诉它，可以上色了，才能绘出来。
- closePath()。落笔。这个你不写也能画出来，但是如果你想画多条不连接的线条，最好是落了。而且生活中我们也要做到干净利落，该落笔时就落笔。
除了上面四个方法，我们还得记住canvas的坐标系，在canvas容器中，左上角是（0,0），没有负坐标。如果你真弄出个负的来，那指定是空中飞舞了。
下面在已经获得的绘制上下文上绘制出一条直线来：
<script>
var canvas = document.getElementById('myCanvas')
if (canvas.getContext) {
var ctx = canvas.getContext('2d')
ctx.beginPath()
ctx.moveTo(10, 10)
ctx.lineTo(100, 10)
ctx.closePath()
ctx.stroke()
} else {
window.console.log('此浏览器不支持canvas')
}
</script>
真实案例如下， 为了方便查看：
See the Pen GRJWbQJ by 张小春Nathan ( @zhangxiaochunxy) on CodePen.