乐鱼电竞

教育行业A股IPO第一股（股票代码 003032）

全国咨询/投诉热线：400-618-4000

HTML5画布中怎样绘制线？

更新时间:2021年04月15日16时39分 来源:乐鱼电竞 浏览次数:

乐鱼电竞-一样的教育，不一样的品质


线是所有复杂图形的组成基�。胍嬷聘丛拥牡耐夹�，首先要从绘制线开始。在绘制线之前首先要了解线的组成。一条最简单的线由三部分组成，分别为初始位置、连线端点以及描边，如图1所示。


HTML画布绘制线

图1 线的组成

对图1线的各部分组成解释如下。

1. 初始位置

在绘制图形时，我们首先需要确定从哪里下“笔”，这个下“笔”的位置就是初始位置。在平面中（2d），初始位置可以通过“x，y”的坐标轴来表示。在画布中从最左上角“0，0”开始，x轴向右增大， y轴向下增大，如图2所示。

HTML画布绘制线

图2 坐标轴示意图

在画布中使用moveTo(x,y)方法来定义初始位置，其中x和y代表水平坐标轴和垂直坐标轴的位置，中间用“,”隔开。x和y的取值为数字，表示像素值（单位省略），例如下面的示例代码。

var cas = document.getElementById('cas');

var context = cas.getContext('2d');

context.moveTo(100,100);

在上面的示例代码中，表示定义的初始位置为横坐标100像素和纵坐标100像素的位置。需要注意的是，moveTo(x,y)方法仅表示移动到当前点，并不会绘制线。


2. 连线端点

连线端点用于定义一个端点，并绘制一条从该端点到初始位置的连线。在画布中使用lineTo(x,y)方法来定义连线端点。和初始位置类似，连线端点也需要定义x和y的坐标位置。例如下面的示例代码。

context.lineTo(100,100);


3. 描边

通过初始位置和连线端点可以绘制一条线，但这条线并不能被看到。这时我们需要为线添加描边，让线变得可见。使用画布中的stroke()方法，可以实现线的可视效果，例如下面的示例代码。stroke()方法的括号中不需要加入任何内容。

context.stroke();




猜你喜欢：

CSS是什么意思？史上最详细介绍

HTML5画布如何设置线的样式？

如何在HTML5中嵌入视频和音频？    

乐鱼电竞前端培训

0 分享到：
和我们在线交谈！
【网站地图】【sitemap】