绘制线段
线段的绘制在 canvas 里应该是最基础的操作,很多复杂的图案就是由最简单的线段组成的,所以我们的课程就从绘制线段开始。
开始之前,我先拿现实生活中画一条线段的流程来类比我们在 canvas 中绘制线段。
在现实中,我们如何去画一条线段呢?我们暂且就按下面的流程来做一遍:
在 canvas 中,我们也是按这个流程来绘制一条线段的。
先看整体案例:
<!DOCTYPE html>
<html>
<head>
< charset="utf-8">
<title>网Wiki</title>
<style>
#imooc{
border:px solid #ccc;
}
</style>
</head>
<body>
<canvas id="imooc"></canvas>
<script>
// 拿到一张白纸
const canvas = document.getElementById('imooc');
const ctx = canvas.getContext('2d');
// 打线笔移动到起点
ctx.moveTo(,);
// 开始描线到终点
ctx.lineTo(,);
// 选择绿色的画笔
ctx.Style="green";
// 开始用画笔描边
ctx.();
</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)
选择画笔,这里我们设定为绿色的画笔,这是使用了 Style
,这里需要注意和的区别,直观的理解就是:是变量,是。
ctx.Style = "green"
开始用画笔描边,这里使用的是:()
,这个没有参数。
ctx.()
到这里,我们就完成了一条线段的绘制。
本小节中我们使用到了三个,都是和绘制线段相关的。
moveTo
主要作用是把画笔路径移动到画布中的指定点,它不会创建线条。通过字面意思我们也可以知道,“move: 移动”,“to: 到… 地方”,整体意思就是移动到某个坐标。
参数说明:
lineTo
主要作用是打线到指定点,它不会创建线条。通过字面意思我们也可以知道,“line: 路线”,“to: 到… 地方”,整体意思就是路线引到某个坐标。
参数说明:
主要作用是绘制出通过
moveTo()
和 lineTo()
定义的路径,如果没有定义画笔的颜色,那么会认使用黑色来绘制。
本小节中,我们只用到了,就是 Styel
。
Style
设置描边的颜色,它的值和 css 中设定颜色一样。
ctx.Style = "blue"
ctx.Style = "#cccccc"
ctx.Style = "#ccc"
ctx.Style = "rgb(200, 200, 200)"
ctx.Style = "rgba(200, 200, 200, 0.5)"
ctx.Style = "hsl(0, 100%, 50%)"
ctx.Style = "hsla(0, 100%, 50%, 0.5)"
以上 7 种设定描边颜色的写法都是的。
本小节我们学习了如何绘制一条线段,我们用了现实生活中画一条线段的流程来做类比,我们还学习了和线段相关的三个新的和。下一节我会带领大家学习绘制多条线段的。