功能分类: 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 相关操作发生影响。