canvas练习之用canvas画一条直线

·  阅读 976

上节课中我们将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.
分类:
阅读
标签:
分类:
阅读
标签:
收藏成功!
已添加到「」, 点击更改