您好, 欢迎来到 !    登录 | 注册 | | 设为首页 | 收藏本站

绘制线段

线段的绘制在 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 种设定描边颜色的写法都是的。

本小节我们学习了如何绘制一条线段,我们用了现实生活中画一条线段的流程来做类比,我们还学习了和线段相关的三个新的和。下一节我会带领大家学习绘制多条线段的。


联系我
置顶