canvas练习之用canvas画一条直线

上节课中我们将canvas的dom渲染了出来，但是没有做任何操作。这一节我要学习在canvas上操作，同时画一些简单的东西，比如线条。

首先，我们需要获取渲染上下文。

如下：

1
2
3
4
5
<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方法，如果没有，就是不支持，如下。

1
2
3
4
5
6
7
8
<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），没有负坐标。如果你真弄出个负的来，那指定是空中飞舞了。

下面在已经获得的绘制上下文上绘制出一条直线来：

1
2
3
4
5
6
7
8
9
10
11
12
13
<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>

真实案例如下， 为了方便查看：