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

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

本文关键字：图像 CSS 没有 HTML javascript 绘制      更新时间：2023-09-26

我动态创建HTMLImageElement，并在画布上绘制它们

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

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

编辑

我不想用另一个图像替换一个图像，我想重叠两个图像："背景"中最大的图像和它前面最小的图像。"Over"是重叠的，也不是被替换的。

只需使用带有调整大小参数的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/>

相关文章：