复习
之前学习了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>
这样，我们的第一个三角形就画出来了，接下来，我们进一步认识一下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>
练习：请将上面例子中的正方形中的填充去掉，只显示四条边。
利用已经学习过的方法，我们还可以绘制更多的图形，只要你有足够的想象力。不过在绘制矩形这一块上，我们还有更加简单的方法。下面我们来学习一下。
- fillRect(x,y,width, height).绘制一个有填充的矩形，x和y是这个矩形的左上角，对应上面方法中的画笔落笔处。width是矩形的宽度，height是矩形的高度。
- 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>
