-
未登录
热门文章
线段的绘制在 canvas 里应该是最基础的一个操作，很多复杂的图案就是由最简单的线段组成的，所以我们的课程就从绘制线段开始。
开始之前，我先拿现实生活中画一条线段的流程来类比我们在 canvas 中绘制线段。
在现实中，我们如何去画一条线段呢？我们暂且就按下面的流程来做一遍：
在 canvas 中，我们也是按这个流程来绘制一条线段的。
先看整体案例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>xx网Wiki</title>
<style> #imooc{ border:1px solid #ccc; } </style>
</head>
<body>
<canvas id="imooc"></canvas>
<script> // 拿到一张白纸 const canvas = document.getElementById('imooc'); const ctx = canvas.getContext('2d'); // 打线笔移动到起点 ctx.moveTo(10,10); // 开始描线到终点 ctx.lineTo(100,50); // 选择绿色的画笔 ctx.strokeStyle="green"; // 开始用画笔描边 ctx.stroke(); </script>
</body>
</html>
运行结果：
我们将上面的例子类比现实中画线的流程拆分讲解：
拿到一张白纸类比我们获取到 canvas 的渲染上下文。
const canvas = document.getElementById('imooc');
const ctx = canvas.getContext('2d');
我们开始铅笔打线，先把铅笔移动到 (100,100) 这个点，这里使用的方法是：moveTo(x,y)，参数为起点坐标。
ctx.moveTo(100, 100)
我们用铅笔从起点画一个路径到终点，也就是 (200,300) 这个点，这里使用的方法是：lineTo(x, y)，参数为终点坐标。
ctx.lineTo(200,300)
选择一个画笔，这里我们设定为绿色的画笔，这是使用了 strokeStyle 属性，这里需要注意属性和方法的区别，直观的理解就是：属性是一个变量，方法是一个函数。
ctx.strokeStyle = "green"
开始用画笔描边，这里使用的方法是：stroke()，这个方法没有参数。
ctx.stroke()
到这里，我们就完成了一条线段的绘制。
本小节中我们使用到了三个方法，都是和绘制线段相关的。
moveTo 方法主要作用是把画笔路径移动到画布中的指定点，它不会创建线条。通过字面意思我们也可以知道，“move: 移动”，“to: 到… 地方”，整体意思就是移动到某个坐标。
参数说明：
| 变量名 | 类型 | 是否必须 | 说明 |
|---|---|---|---|
| x | Number | 是 | canvas 画布上相对于原点所绘制的矩形的左上角的 X 坐标。 |
| y | Number | 是 | canvas 画布上相对于原点所绘制的矩形的左上角的 Y 坐标。 |
lineTo 方法主要作用是打线到指定点，它不会创建线条。通过字面意思我们也可以知道，“line: 路线”，“to: 到… 地方”，整体意思就是路线引到某个坐标。
参数说明：
| 变量名 | 类型 | 是否必须 | 说明 |
|---|---|---|---|
| x | Number | 是 | canvas 画布上相对于原点所绘制的矩形的左上角的 X 坐标。 |
| y | Number | 是 | canvas 画布上相对于原点所绘制的矩形的左上角的 Y 坐标。 |
stroke 方法主要作用是绘制出通过 moveTo() 和 lineTo() 方法定义的路径，如果没有定义画笔的颜色，那么会默认使用黑色来绘制。
本小节中，我们只用到了一个属性，就是 strokeStyel。
strokeStyle 属性设置描边的颜色，它的值和 css 中设定颜色一样。
ctx.strokeStyle = "blue"
ctx.strokeStyle = "#cccccc"
ctx.strokeStyle = "#ccc"
ctx.strokeStyle = "rgb(200, 200, 200)"
ctx.strokeStyle = "rgba(200, 200, 200, 0.5)"
ctx.strokeStyle = "hsl(0, 100%, 50%)"
ctx.strokeStyle = "hsla(0, 100%, 50%, 0.5)"
以上 7 种设定描边颜色的写法都是支持的。
本小节我们学习了如何绘制一条线段，我们用了现实生活中画一条线段的流程来做类比，我们还学习了和线段相关的三个新的方法和一个属性。下一节我会带领大家学习绘制多条线段的方法。