circle(x, y, radius) 在画布里画圆形

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

以指定坐标 (x, y) 为圆心，以指定的 radius 半径在画布上画一个圆形。

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

示例代码


// 在画布上以画布中心（在这里对应屏幕中心）为圆心画一个圆形
createCanvas("canvas1");
circle(200, 280, 100);

示例代码：红色线条 修改画线条时画笔使用的颜色


// 修改画线条时画笔使用的颜色
createCanvas("canvas1");
setStrokeColor("red");
circle(200, 280, 100);

示例代码：红色填充 修改线条内部区域的填充颜色为红色，线条颜色保持默认


// 修改线条内部区域的填充颜色为红色，线条颜色保持默认
createCanvas("canvas1");
setFillColor("red");
circle(200, 280, 100);

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


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

示例代码：两个圆形 同一圆心位置画两个半径不同线条粗细的圆形。


// 同一圆心位置画两个半径不同线条粗细的圆形。
createCanvas("canvas1");
setStrokeWidth(40);
setStrokeColor("lightblue");
circle(200, 280, 100);
setStrokeWidth(1);
setStrokeColor("black");
circle(200, 280, 100);

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


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

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


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

语法规则


circle(x, y, radius)

参数说明

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

返回值

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

提示说明

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

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

返回文档首页