canvas练习之形状的绘制

·  阅读 120

复习

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

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

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

  • canvas背景是一个以左上角为(0,0)点的坐标轴,只有正数。

  • 利用canvas绘制一条直线时,需要有四个基于绘制上下文的接口:beginPath()开始绘画。moveTo(x,y)落笔,lineTo(x,y)将笔触拉到某一个点,closePath()结束绘制,起笔,stroke()给已经绘制出来的线条上色。

学习,用canvas绘制三角形

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

<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>
复制代码
See the Pen learn canvas 3-1 by 张小春Nathan (@zhangxiaochunxy) on CodePen.

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

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

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

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

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

学习,画一个矩形

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

<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>
复制代码
See the Pen learn canvas 3-2 by 张小春Nathan (@zhangxiaochunxy) on CodePen.

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

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

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

例:

<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>
复制代码

绘制有填充的矩形

See the Pen learn canvas 3-3 by 张小春Nathan (@zhangxiaochunxy) on CodePen.

填充无填充的矩形

See the Pen abOwaZQ by 张小春Nathan (@zhangxiaochunxy) on CodePen.

学习。擦子

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

<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>
复制代码

查看原文

分类:
阅读
标签:
分类:
阅读
标签:
收藏成功!
已添加到「」, 点击更改