绘制线段

发布时间：2023-05-24 14:05:18 所属栏目：教程来源：

导读：线段的绘制在 canvas 里应该是最基础的一个操作，很多复杂的图案就是由最简单的线段组成的，所以我们的课程就从绘制线段开始。

绘制线段

开始之前，我先拿现实生活中画一条线段的流程来类比我们在 canvas 中绘

线段的绘制在 canvas 里应该是最基础的一个操作，很多复杂的图案就是由最简单的线段组成的，所以我们的课程就从绘制线段开始。

绘制线段

开始之前，我先拿现实生活中画一条线段的流程来类比我们在 canvas 中绘制线段。

拿到一张白纸（画布）；
铅笔移动到起点；
开始描线到终点（类似于素描中的打线）；
选择一种有颜色的画笔；
开始描边（画出轮廓线）。
在 canvas 中，我们也是按这个流程来绘制一条线段的。

先看整体案例：

<!DOCTYPE html>
<html>
<head>
   <Meta 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.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()
到这里，我们就完成了一条线段的绘制。

（编辑：汽车网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!