line(x1, y1, x2, y2) 在画布里画直线

功能分类： Canvas Applab JavaScript 少儿编程

以指定坐标的起点 (x1, y1) 以及指定坐标的终点 (x2, y2) 在画布上画一条直线。

在画布里，你可以使用一些基本的画布方法来绘制多种规则图形，如圆、线以及矩形。对于 line() 方法来说，指定的起点 (x1, y1) 到终点 (x2, y2) 坐标可以唯一决定这条直线在画布中的位置及长度。这里指定的坐标都是针对画布的相对坐标，相对画布最左上角为起点 (x:0 y:0) 的坐标。画线时使用的是当前画笔的粗细宽度及当前的画笔颜色。

在画比较粗的线条时，指定的坐标对应的是画笔中央的位置。所绘制线条的末端回做圆滑处理，形成半圆形的线条末端。

示例代码


//在屏幕上画一条对角线。
createCanvas("canvas1");
line(0, 0, 400, 560);

示例代码：小小画布限制了你的想象力？ 画到画布之外的内容是不可见的


// 画到画布之外的内容是不可见的
createCanvas("canvas1", 50, 50);
line(0, 0, 400, 560);

示例代码：不同粗细 绘制两条不同粗细的线条，看看画笔粗细宽度对绘制内容的影响


// 绘制两条不同粗细的线条，看看画笔粗细宽度对绘制内容的影响
createCanvas("canvas1");
setStrokeColor("lightblue");
setStrokeWidth(20);
line(20, 50, 300, 50);
setStrokeColor("black");
setStrokeWidth(1);
line(20, 50, 300, 50);

示例代码：随机线条艺术 画 100 个随机线条，看看是什么效果。


// 画 100 个随机线条，看看是什么效果。
createCanvas("canvas1");
var x1=randomNumber(0,400);
var y1=randomNumber(0,560);
var x2=randomNumber(0,400);
var y2=randomNumber(0,560);
for (var i = 0; i < 100; i++) {
  line(x1, y1, x2, y2);
  x1=x2;
  y1=y2;
  x2=randomNumber(0,400);
  y2=randomNumber(0,560);  
}

语法规则


line(x1, y1, x2, y2)

参数说明

名称 类型 必需 参数描述
x1 number Yes 在画布里画线相对画布的起点横轴坐标。
y1 number Yes 在画布里画线相对画布的起点纵轴坐标。
x2 number Yes 在画布里画线相对画布的终点横轴坐标。
y2 number Yes 在画布里画线相对画布的终点纵轴坐标。

返回值

没有返回值。只在显示结果页面体现代码执行前后变化。

提示说明

  • 使用这个方法之前，需要确保屏幕上 canvas 画布已被创建，你可以在 Applab 里的 设计 模式里创建画布，或在代码里使用 createCanvas() 方法创建画布。
  • 如果发现绘制的图形没有显示，你首先需要检查在此之前画布是否被成功创建，其次需要检查绘制内容是否在画布可见范围之内。另外你还可能需要检查当前激活画布是否被其他控件遮挡。
  • 在画布上，最左上角为坐标起点 (x:0, y:0) 位置。在画布内可见坐标范围为：在横轴（x）方向，从 0 到 画布宽度值，并且从左往右坐标从小到大；在纵轴（y）方向，从 0 到 画布高度值，并且从上往下坐标从小到大。注意：计算机里使用的坐标系跟数学里介绍的二维坐标系不太一样！
  • 使用这个方法之前，可以先使用 setStrokeWidth、setStrokeColor 方法来设置画笔的粗细及线条绘制颜色。

查看更多少儿编程教程、JavaScript 介绍

返回文档首页