rect(x, y, width, height) 在画布里画矩形

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

指定坐标 (x, y) 为起点，指定 width 为宽度，指定 height 为高度在画布上画一个矩形。

在画布里，你可以使用一些基本的画布方法来绘制多种规则图形，如圆、线以及矩形。对于 rect() 方法来说，指定的坐标 (x, y) 作为矩形的起始位置。这里指定的坐标都是针对画布的相对坐标，相对画布最左上角为起点 (x:0 y:0) 的坐标。画线时使用的是当前画笔的粗细宽度及当前的画笔颜色，画完圆形线条后再以当前画笔的填充颜色填充线条内部区域。

示例代码


// 在画布左上方画一个 100x100 像素的长方形。
createCanvas("canvas1");
rect(0, 0, 100, 100);

示例代码：红色框子 离开画布左上角 50 像素，画一个填充红色的矩形。


// 离开画布左上角 50 像素，画一个填充红色的矩形。
createCanvas("canvas1");
setFillColor("red");
rect(50, 50, 100, 200);

示例代码：线条粗细 修改绘制线条的粗细


//  修改绘制线条的粗细
createCanvas("canvas1");
setStrokeWidth(20);
rect(50, 50, 100, 200);

示例代码：画两个矩形 在同样位置画两个同样尺寸的矩形，但线条粗细不同。


// 在同样位置画两个同样尺寸的矩形，但线条粗细不同。
createCanvas("canvas1");
setStrokeWidth(40);
setStrokeColor("lightblue");
rect(50, 50, 100, 200);
setStrokeWidth(1);
setStrokeColor("black");
rect(50, 50, 100, 200);

示例代码：重叠的矩形 看一下不同填充颜色对所画图形的影响


// 看一下不同填充颜色对所画图形的影响
createCanvas("canvas1");
setFillColor("white");
rect(50, 50, 100, 200);
rect(50, 100, 100, 200);
setStrokeColor("red");
setFillColor("transparent");
rect(200, 50, 100, 200);
rect(200, 100, 100, 200);

示例代码：是不是太大了 画一个比画布还大的矩形，看看哪些部分可见，哪些部分不可见。


// 画一个比画布还大的矩形，看看哪些部分可见，哪些部分不可见。
createCanvas("canvas1", 120, 50);
setPosition("canvas1", 100, 260);
setStrokeWidth(15);
rect(60, -15, 50, 50);

语法规则


rect(x, y, width, height);

参数说明

名称 类型 必需 参数描述
x number Yes 指定矩形起始位置的横轴坐标（单位：像素），此坐标为相对于画布最左上角为起点的相对坐标。
y number Yes 指定矩形起始位置的纵轴坐标（单位：像素），此坐标为相对于画布最左上角为起点的相对坐标。
width number Yes 指定矩形宽度（单位：像素）。
height number Yes 指定矩形高度（单位：像素）。

返回值

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

提示说明

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

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

返回文档首页