canvas练习之形状的绘制

复习

之前学习了canvas的基础知识和利用canvas画一条追线。

  • 首先canvas是一个新的h5 dom，在一些老的浏览器上可能存在不支持的风险，需要做好回退策略。

  • 利用canvas进行绘制时，首先要获取canvas的dom，然后通过getContext()接口，传入参数‘2d’来获取绘制上下文。

  • canvas背景是一个以左上角为（0，0）点的坐标轴，只有正数。
  • 利用canvas绘制一条直线时，需要有四个基于绘制上下文的接口：beginPath()开始绘画。moveTo(x,y)落笔，lineTo(x,y)将笔触拉到某一个点，closePath()结束绘制，起笔，stroke()给已经绘制出来的线条上色。

学习，用canvas绘制三角形

我们已经学习过如何绘制线条。现在，我们就利用已经学习过的内容，将三角形绘制出来。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<canvas id="mycanvas3" width="400" height="400"><canvas>
<script>
var canvas = document.getElementById('mycanvas3')
if (canvas.getContext) {
  var ctx = canvas.getContext('2d')
  ctx.beginPath()
  ctx.MoveTo(20,20)
  ctx.lineTo(60, 20)
  ctx.lineTo(40,50)
  ctx.lineTo(20,20)
  ctx.closePath()
  ctx.stroke()
}
</script>

这样，我们的第一个三角形就画出来了，接下来，我们进一步认识一下closePath()。观察上面的代码可以发现，有一个点我们画了两次，一次是开始的时候，另一次是结束的时候，那么，有没有可能只画一次呢？

答案当然是有的。在上面的代码中，我们将结束的一个点删掉，既删掉ctx.lineTo(20,20),我们会发现三角形依旧画了出来，这就是closePath()的另外一个作用，会将未闭合的图形给闭合了，闭合方法是连接终点和起点。

总结：closePath()的第一个作用是结束画笔和画板的接触；第二个作用是通过连接终点和起点将图形闭合。

现在，我们画出来的三角形是由线条组成的，内部空白。如果我们需要的不是一个线条组成的三角形，而是一个被填充了的三角形，该怎么办呢？

上一节我们学习了stroke()方法，可以对线条进行上色，让线条显示出来。所以，肯定也有一个方法，可以对图形上色。这个方法就是fill()。现在，只需要将上面代码中的stroke()用fill()替换即可。快去练习一下吧。

学习，画一个矩形

通过画三角形,我们很容就能画出一个矩形来，只要掌握好每次落笔的位置就行了，如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<canvas id="mycanvas3" width="400" height="400"></canvas>
<script>
let canvas = document.getElementById('mycanvas3')
if (canvas.getContext) {
  let ctx = canvas.getContext('2d')
  ctx.beginPath()
  ctx.moveTo(20,20)
  ctx.lineTo(40,20)
  ctx.lineTo(40, 40)
  ctx.lineTo(20, 40)
  ctx.closePath()
  ctx.stroke()
} else {
  console.log('浏览器不支持canvas')
}
</script>

练习：请将上面例子中的正方形中的填充去掉，只显示四条边。

利用已经学习过的方法，我们还可以绘制更多的图形，只要你有足够的想象力。不过在绘制矩形这一块上，我们还有更加简单的方法。下面我们来学习一下。

  1. fillRect(x,y,width, height).绘制一个有填充的矩形，x和y是这个矩形的左上角，对应上面方法中的画笔落笔处。width是矩形的宽度，height是矩形的高度。
  2. strokeRect(x,y,width,height).绘制一个无填充的矩形，参数同上。

例：

1
2
3
4
5
6
7
8
<canvas id="canvasFillRect"></canvas>
<script>
let canvas = document.getElementById('canvasFillRect')
if (canvas.getContext) {
  let ctx = canvas.getContext('2d')
  ctx.fillRect(10, 10, 30, 50)
}
</script>

绘制有填充的矩形

填充无填充的矩形

学习。擦子

我们知道，平时绘画时，我们有时需要擦出一些内容，canvas中，也为我们提供了这样一个接口，clearRect(x,y,width, height),x和y代表的是要擦除地点的起点，width和height代表要擦除区域的宽度和高度。去亲自试一下下面的代码吧。

1
2
3
4
5
6
7
8
9
<canvas id="canvasFillRect"></canvas>
<script>
let canvas = document.getElementById('canvasFillRect')
if (canvas.getContext) {
  let ctx = canvas.getContext('2d')
  ctx.fillRect(10, 10, 30, 50)
  ctx.clearRect(10,10,10, 20)
}
</script>