如何在 javascript 中在图像上绘制图像（没有 CSS 和 HTML）

Question

我动态创建 HTMLImageElement(s) 并在 canvas

上绘制它们

var image = new Image();
image.src = 'mypath/image.png';
context.drawImage(image, point.x, point.y); // context is a CanvasRenderingContext2D element

现在我想在 image 上绘制另一个图像（较小），仍然是动态的。没有 CSS 或 HTML 的帮助可能吗？

编辑

我不想用另一张图片替换一张图片，我想重叠两张图片："background" 中最大的一张和前面最小的一张。 "Over" 旨在作为重叠，而不是替换。

Answer 1

只需将 drawImage() 与调整大小参数一起使用：

context.drawImage(image, point.x, point.y, wantedWidth, wantedHeight);

图片来源可以是image甚至context本身。

（还记得在尝试绘制之前在图像元素上使用 onload 处理程序。）

var ctx = document.querySelector("canvas").getContext("2d"),
    img = new Image;

img.onload = function() {
  ctx.drawImage(this, -200, -200, 800, 800);
  ctx.drawImage(this, 0, 0);
};

img.src = "http://i.imgur.com/RV2a28T.png";

<canvas/>

如何在 javascript 中在图像上绘制图像（没有 CSS 和 HTML）

how to draw image over image in javascript (without CSS and HTML)

javascript

canvas

image