clearCanvas() 清空画布数据

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

清空当前激活画布上的所有数据(所有图像信息)。

就像你可以清空一个文档里的所有数据内容,Applab 里使用这个方法也可以清空当前激活画布上的所有数据信息。清空画布操作通常通过一些时间进行触发,如点击按钮。在下面的示例中使用了 setTimeout 以及 onEvent ,来跟 clearCanvas() 方法结合使用。

示例代码



// 在画布上画一个矩形,画完后清空画布
// 在运行时调慢运行速度,可以更好的看清这一过程
createCanvas("canvas1");
setStrokeWidth(10);
rect(120, 200, 80, 80);
clearCanvas();

示例代码:定时清空 画布上画一矩形,使用 setTimeout 方法设定 3 秒后清空。


// 画布上画一矩形,使用 setTimeout() 方法设定 3 秒后清空。
createCanvas("canvas1");
setStrokeWidth(10);
rect(120, 200, 80, 80);
setTimeout(function() {
    clearCanvas();
}, 3000);

示例代码:变化笑脸 点击后重新绘制。


// 点击后重新绘制。
textLabel("instruction", "Click on the mouth to draw a new mouth where you click.");
createCanvas("face");
setFillColor("yellow");
circle(160, 240, 100);
setFillColor("black");
circle(125, 215, 20);
circle(195, 215, 20);
setFillColor("white");
createCanvas("mouth", 120, 50);
setActiveCanvas("mouth");
setPosition("mouth", 100, 260);
setStrokeWidth(15);
circle(60, -15, 50);
onEvent("mouth", "click", function(click) {
  setActiveCanvas("mouth");
  clearCanvas();
  circle(click.offsetX, click.offsetY, 25);
});

语法规则


clearCanvas();

参数说明

clearCanvas() 方法不使用任何参数。

返回值

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

提示说明

  • 此方法只对当前激活画布有效。其他画布不受影响。
  • 如果当前激活画布后面遮盖其他画布或控件,清空画布操作会使原先被遮挡的内容重新暴露出来。

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

返回文档首页