如何在javascript中绘制图像而不是图像（没有CSS和HTML） [英] how to draw image over image in javascript (without CSS and HTML)

问题描述

我动态创建 HTMLImageElement （s）并在画布上绘制它们

I create HTMLImageElement(s) dynamically and I draw them on canvas

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

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

Now I want to draw another image (smaller) over image, still dynamically. Is it possible without help of CSS or HTML?

编辑

我不喜欢我不想用另一个图像替换图像，我想重叠两个图像：背景中最大的图像和前面的最小图像。 Over旨在作为重叠，也不是替换。

I don't want to replace an image with another image, I want to overlap two images : the biggest one in the "background" and the smallest one in front of it. "Over" is intended as a overlapped, nor replaced.

推荐答案

只需使用 drawImage（）和resize参数：

Just use drawImage() with the resize parameters:

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

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

Image source can be image or even context itself.

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

(Also remember to use onload handler on the image element before attempting to draw it.)

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）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！