canvas学习之Path2D

复习

上一节中，我们学习了用二阶贝塞尔曲线和三阶贝塞尔曲线来绘制平滑曲线的方法。

  • quatraticCurveTo(x1,y1,x2,y2)二阶贝塞尔曲线，和moveTo(x,y)或者lineTo(x,y)相关的点在一起，组成三个点生成平滑曲线。
  • bezierCurveTo(x1,y1,x2,y2,x3,y3)三阶贝塞尔曲线，moveTo(x,y)或者lineTo(x,y)相关的点在一起，组成三个点生成平滑曲线。

学习：这节我们学习一个新的对象，Path2D()。

Path2D对象能够使用ctx上全部的接口，并且能够记住我们自定义的路径，因为我的理解不够深，感觉会免去很多beginPath()之类的反复动作，而且可以使用svg路径。 Path2D算是高阶内容，仅做了解。下面我做一个示例。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<canvas id="mycanvas" width="500" height="500"></canvas>
<script>
let canvas = document.getElementById('mycanvas')
if (canvas.getContext) {
  let ctx = canvas.getContext('2d')
  ctx.beginPath()
  let triangle = new Path2D()
  triangle.moveTo(100, 100)
  triangle.lineTo(400, 100)
  triangle.lineTo(200, 200)
  triangle.lineTo(100, 100)
  
  let other = new Path2D()
  other.moveTo(400, 200)
  other.lineTo(400, 400)
  other.lineTo(200, 200)
  other.lineTo(400, 400)
  other.lineTo(500, 200)
  let p = new Path2D("M100 100 h 80 v 80 h -80 Z")
  ctx.fillStyle ='#e74478'
  ctx.fill(other)
  ctx.stroke(triangle)
  ctx.fill(p)
  
}
</script>