功能分类： Canvas Applab JavaScript 少儿编程
将指定 id 的 image 图片 或 canvas 画布，绘制到当前处于激活状态的画布里，并指定起点位置 (x, y) 以及 width 宽度 和 height 高度。
使用 drawImage() 方法，可以将指定 id 的已经存在的图片控件或画布控件内容绘制到当前激活画布，并放置在 (x, y) 位置。这里指定的 (x, y) 坐标都是针对画布的相对坐标，相对画布最左上角为起点 (x:0 y:0) 的坐标。在画布里的这个位置作为绘制内容左上角的起始位置来绘制。在这个方法里，width 宽度 和 height 高度 两个参数是可选的；如果不提供这两个值，绘制内容的尺寸对应原来控件的尺寸；如果提供了这两个值且这两个值与原有尺寸不一致，则新绘制内容的尺寸会在原有尺寸基础上做相应拉伸或缩小以适应尺寸设定。
这个方法如果绘制的是图形控件，相关的 image 图形控件可以通过 image() 方法提前创建；如果绘制的是 canvas 画布控件，这个画布控件可以同过 createCanvas() 方法提前创建。
注意 1: 使用这个方法之前，需要确保屏幕上 canvas 画布已被创建，你可以在 Applab 里的 设计 模式里创建画布，或在代码里使用 createCanvas() 方法创建画布。
注意 2: 不要被这个方法的名称所迷惑。这个方法不只是画 image 图形控件，也可以画 canvas 画布控件。
注意 3: 这个方法是将已有的控件重新绘制到当前激活状态的 canvas 画布里。这与 image()、createCanvas() 等方法是完全不同的。
示例代码：位置与尺寸 在这个例子里，演示一下怎样使用 drawImage() 的位置参数以及 width 宽度以及 height 高度参数。在代码里小猫图片会被在不同位置以不同尺寸绘制三次。并且你将会看到，如果不提供宽度及高度参数，绘制内容的尺寸将默认使用原来控件的尺寸。
// 创建 image 图片控件 (cat_thumb.png，100x100 像素尺寸)
image("cat", "https://studio.xiaowai.co/blockly/media/skins/studio/cat_thumb.png");
// 创建画布，后面的操作将在这个画布上进行
createCanvas();
// 在画布上绘制之前创建的 cat 图片控件，实际尺寸：(100x100)
drawImage("cat", 0, 200);
// 在画布上再次绘制之前创建的 cat 图片控件，实际尺寸：(100x200)
drawImage("cat", 100, 100, 100, 200);
// 在画布上第三次绘制之前创建的 cat 图片控件，实际尺寸：(200x100)
drawImage("cat", 0, 300, 200, 100);
示例代码：显示与隐藏 在这个例子里，原始的 image 图片控件被隐藏掉了。但这不影响后面基于它进行的绘制。最后在画布里绘制的图形是可见的。
// 创建原始的 image 图片控件 (cat_thumb.png，100x100 像素)
image("cat", "https://studio.xiaowai.co/blockly/media/skins/studio/cat_thumb.png");
// 将原始的 image 图片控件隐藏
hideElement("cat");
// 创建画布，后面的操作将在这个画布上进行
createCanvas();
// 在画布上重新绘制之前创建的 cat 图片控件，全屏尺寸
drawImage("cat", 0, 0, 400, 560);
示例代码：显示与隐藏 在这个例子里，演示如何将一个画布绘制到另一个画布里。首先创建一个小的画布并在里面绘制一个大的蓝色圆形，圆形超出画布边界，因此圆形只有部分是可见的。
在这之后这个画布会被重复多次绘制到另一个处于激活状态的画布里，最后在屏幕上呈现一个像波浪的完整图形。
// 创建一个小的画布并在里面绘制一个大的蓝色圆形，圆形超出画布边界
createCanvas("wave", 60, 40);
setStrokeColor("blue");
setStrokeWidth(20);
circle(30, -10, 40);
// 创建第二个 id 为 "water" 的画布并将其激活
createCanvas("water");
setActiveCanvas("water");
// 将第一个画布重复绘制到当前激活画布里
for (var x = 0; x < 320; x += 60) {
drawImage("wave", x, 300);
}
示例代码：显示与隐藏 在这个例子里，在前面代码基础上，画一个在波浪下画一个小乌贼的图形。
在这个例子里 drawImage() 调用的原始控件是隐藏的，只有最后的结果是可见的。这里你也可以再次看到，原始控件隐藏与否，不会影响使用 drawImage() 方法在激活画布上重新绘制的结果。
// 创建原始图片控件，并将其隐藏
image("octopus", "https://studio.xiaowai.co/blockly/media/skins/studio/octopus_thumb.png");
hideElement("octopus");
// 创建原始画布控件，并将其隐藏
createCanvas("wave", 60, 40);
hideElement("wave");
// 绘制波浪图形
// 这时第一个画布处于默认激活状态
// 所以下面的绘制会绘制在第一个画布上
setStrokeColor("blue");
setStrokeWidth(20);
circle(30, -10, 40);
// 现在创建另一个画布，并设置为激活状态
// 注意这时激活状态的画布已由第一个画布变为第二个画布
createCanvas("water");
setActiveCanvas("water");
// 将前面已被隐藏的第一个画布画到第二个画布里
for (var x = 0; x < 320; x += 60) {
drawImage("wave", x, 300);
}
drawImage("octopus", 110, 350);
drawImage(id, x, y, width, height);
| 名称 | 类型 | 必需 | 参数描述 |
|---|---|---|---|
| id | string | Yes | 指定原始图片控件或画布控件的 id 唯一标识。 |
| x | number | Yes | 指定图片位置的横轴坐标（单位：像素），此坐标为相对于画布最左上角为起点的相对坐标。 |
| y | number | Yes | 指定图片位置的纵轴坐标（单位：像素），此坐标为相对于画布最左上角为起点的相对坐标。 |
| [width] | number | No | 指定新绘制内容水平方向的宽度。如果宽度与原始尺寸不一致，实际绘制内容在原来尺寸基础上会有相应拉伸。 |
| [height] | number | No | 指定新绘制内容垂直方向的高度。如果宽度与原始尺寸不一致，实际绘制内容在原来尺寸基础上会有相应拉伸。 |
没有返回值。只在显示结果页面体现代码执行前后变化。