Canvas 绘制路径

想必大家都知道:连点成线,什么意思呢? 就是在画布先绘上很多点,然后使用直线或者曲线把它们连接在一起,就成各种不同的图形

  1. 先在图上绘制多个点

  2. 随意画一些线条将这些线连在一起

  3. 可能最后还要闭合,也就是回到起点

我们在画板 (canvas) 中画画也是上面这样的,流程都差不多,我们分解下前面的操作

  1. 首先,我们要大吼以上,我要画线啦,我们称这个操作为 closePath()

    这个操作是可选的,如果最后线段要闭合,那么这个就是必选

  2. 其次要做的就是确定起点坐标,也就是先把画笔移动到某个位置,然后在开始画画

    我们称这个操作为 move(x0,y0)

  3. 然后确定好下一个位置 (x1,y1)

    我们称这个操作为 lineTo(x1,y1)

  4. 然后就可以使用 lineTo(xn,yn) 多画几个点了,直到最后一个点

  5. 如果我们要将图形闭合,则还要绘制到起始点

    我们称这个操作为 closePath()

    这个操作是可选的,如果不选择就不会闭合

  6. 最后描边,画出实际的线

Canvas 中的连点成线

Canvas 中的渲染上下文也提供了类似上面这种机制用于画线(图形)

方法 说明
ctx.beginPath() 开始一个新路径的
ctx.move(x,y) 将新路径的起始点移动到坐标 (x,y)
ctx.lineTo(x,y) 使用直线连接子路径的终点到坐标(x,y),并不会真正地绘制
为什么说是终点,如果不再继续调用 lineTo() 那么它就是终点了不是
ctx.closePath() 将画笔返回到当前子路径起始点
ctx.stroke() 根据当前的画线样式,绘制当前或已经存在的路径

范例

下面的代码绘制了一个三角形

<!DOCTYPE html>
<meta charset="utf-8"> 
<canvas id="canvas-1" width="400" height="300">
</canvas>

<script>
var c   = document.getElementById("canvas-1");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.moveTo(20,20);
ctx.lineTo(200,20);
ctx.lineTo(120,120);
ctx.closePath();
ctx.stroke();
</script>

运行结果如下

如果没有调用 endPath() 则不会闭合图形

<!DOCTYPE html>
<meta charset="utf-8"> 
<canvas id="canvas-11" width="400" height="300">
</canvas>

<script>
var c   = document.getElementById("canvas-11");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.moveTo(20,20);
ctx.lineTo(200,20);
ctx.lineTo(120,120);
ctx.closePath();
ctx.stroke();
</script>

运行结果如下

还可以使用 strokeStyle 定制线条的颜色

<!DOCTYPE html>
<meta charset="utf-8"> 
<canvas id="canvas-2" width="400" height="300">
</canvas>

<script>
var c   = document.getElementById("canvas-2");
var ctx = c.getContext("2d");
ctx.strokeStyle = "green"
ctx.beginPath();
ctx.moveTo(20,20);
ctx.lineTo(200,20);
ctx.lineTo(120,120);
ctx.closePath();
ctx.stroke();
</script>

运行结果如下

其实没有 beginPath() 也可以调用图形,这时候不管有没有 endPath() 图形不会闭合

<!DOCTYPE html>
<meta charset="utf-8"> 
<canvas id="canvas-3" width="400" height="300">
</canvas>

<script>
var c   = document.getElementById("canvas-3");
var ctx = c.getContext("2d");
ctx.strokeStyle = "green"
ctx.moveTo(20,20);
ctx.lineTo(200,20);
ctx.lineTo(120,120);
ctx.endPath()
ctx.stroke();
</script>

运行效果如下

看一个多次调用 moveTo() 的例子

<!DOCTYPE html>
<meta charset="utf-8">
<canvas id="canvas-4" width="400" height="300">
</canvas>

<script>
var c   = document.getElementById("canvas-4");
var ctx = c.getContext("2d");
ctx.strokeStyle = "green"
ctx.moveTo(20,20);
ctx.lineTo(200,20);
ctx.lineTo(120,120);
ctx.stroke();
ctx.strokeStyle = "yellow"
ctx.moveTo(100,100);
ctx.lineTo(20,200);
ctx.lineTo(220,220);
ctx.stroke();
</script>

运行效果如下

Canvas 基础教程

关于   |   FAQ   |   我们的愿景   |   广告投放   |  博客

  简单教程,简单编程 - IT 入门首选站

Copyright © 2013-2018 简单教程 twle.cn All Rights Reserved.