setActiveCanvas(id) 设置激活画布

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

将指定 id 的 canvas 画布 设置为激活画布。(在 APP 里,可以有多个画布,但只有一个激活画布(只会有一个画布处于激活状态)。画布相关绘制图形图像的方法只对当前激活画布有效。)

在 APP 应用里可以使用多个、甚至相互重叠的画布。每个画布内都可以有自己的可以改变的画笔颜色及画笔粗细宽度值。

当 APP 里第一次使用 createCanvas() 方法时,这个方法创建的画布会默认为当前激活画布。所有画布相关的操作如:line() and rect 只会在当前激活状态的画布内生效。在这之后创建其他画布时,默认不会对当前激活画布产生影响。同样所有跟状态或属性相关的操作如 setFillColor and setStrokeColor 也只会修改当前激活状态的画布的相关状态或属性。

使用 canvas 类别方法进行的操作与使用 turtle 类别的方法进行的操作是有区别的。通过 canvas 方法进行操作时实际像素及坐标信息对开发者来说都是可以访问到的。

示例代码



// 两个重叠的画布,修改画布相关属性的操作不会对未激活画布 canvas2 产生影响。
createCanvas("canvas1");
createCanvas("canvas2");
setStrokeWidth(10);
setStrokeColor("blue");
setFillColor("yellow");
circle(160, 240, 50);
setActiveCanvas("canvas2");
rect(90, 170, 140, 140);

示例代码:笑脸编程 画一个笑脸。第二个画布尺寸较小并放置在笑脸嘴巴的位置。因为只有绘制在画布实际尺寸范围的内容是有效地,在第二个画布里绘制的部分内容会被截掉,超出画布位置绘制的内容是不可见的。


// 画一个笑脸。第二个画布尺寸较小并放置在笑脸嘴巴的位置。因为只有绘制在画布实际尺寸范围的内容是有效地,在第二个画布里绘制的部分内容会被截掉,超出画布位置绘制的内容是不可见的。
createCanvas("face");
setFillColor("yellow");
circle(160, 240, 100);
setFillColor("black");
circle(125, 215, 20);
circle(195, 215, 20);
createCanvas("mouth", 120, 50);
setActiveCanvas("mouth");
setPosition("mouth", 100, 260);
setStrokeWidth(15);
circle(60, -15, 50);

示例代码:哪个在前,哪个在后 创建三个画布,后面创建的画布会覆盖前面创建的画布。哪个在前,哪个在后跟创建顺序有关。


// 创建三个画布,后面创建的画布会覆盖前面创建的画布。哪个在前,哪个在后跟创建顺序有关。
createCanvas("back");
createCanvas("middle");
createCanvas("front");
setActiveCanvas("front");
setStrokeWidth(30);
setStrokeColor("blue");
line(60, 30, 60, 230);
line(30, 60, 230, 60);
setActiveCanvas("middle");
setStrokeWidth(30);
setStrokeColor("red");
line(130, 30, 130, 230);
line(30, 130, 230, 130);
setActiveCanvas("back");
setStrokeWidth(30);
setStrokeColor("green");
line(200, 30, 200, 230);
line(30, 200, 230, 200);

语法规则


setActiveCanvas(id);

参数说明

名称 类型 必需 参数描述
id string Yes canvas 画布控件 的 id 唯一标识。必须以字母开头,不能包含空格,可以包含字母、数字、减号 - 以及下划线 _ 。

返回值

没有返回值。这个方法本身也不会发生显示方面的变化。但会对之后的 canvas 相关操作发生影响。

提示说明

  • 在 APP 里同时只能有一个画布处于激活状态。基于画布进行的所有操作在开始前需要确保画布本身已被创建。可以使用 createCanvas 来创建画布。
  • 可以使用 setPosition() 方法设置画布位置或修改画布尺寸或两者同时进行。但需要注意的是,当画布尺寸变更时,其相对于画布内图形图像的边界尺寸不发生变化(画布内图形图像坐标不发生变化)。为了适应新的画布尺寸,画布内所有内容会等比例一同拉伸或缩小。
  • 绘制在画布尺寸之外的图形图形将无法显示(不可见)。在画布内可见坐标范围为:在横轴(x)方向,从 0 到 画布宽度值;在纵轴(y)方向,从 0 到 画布高度值。
  • 在有多个画布时,经常会出现画布重叠的情况。后面创建的画布会覆盖在前面创建画布的上方。也就是说第二次创建的画布会盖住第一次创建的画布,如果它们之间有重叠的话。

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

返回文档首页