html图像ID和画布

Question

嗨，我有一个简单的问题，我似乎无法在Google上找到答案。 我正在尝试在画布上绘制图像。 我最初使用的是“ new”构造函数（ballPic = new Image（）; ballPic.src =“ ball.png”），该构造函数在画布上绘制时有效，但是我需要进行一些缩放，不确定是否可以附加该对象的CSS ID。 因此，我改为尝试使用image标签，并在CSS中进行其余操作。

但是以这种方式使用变量似乎可以与我的画布的绘图一起使用：

ballPic = '<img id="soccerBall">';
var c=document.getElementById("myCanvas");
            var ctx=c.getContext("2d");
            ctx.drawImage(BallPic, -25, -25);  

这是因为分配像ballPic =这样的变量与使用构造函数时像元素本身一样是不同的吗？ 除了将其附加到文档并使用getElementbyID之外，我将如何传递它？

Answer 1

您可以继续使用Image构造函数，并仍然缩放图像。 drawImage函数还有另一个方法重载：

从MDN ：

drawImage（）方法的第二个变体添加了两个新参数，并允许我们在画布上放置缩放后的图像。

drawImage(image, x, y, width, height)

这将添加width和height参数，这些参数指示将图像绘制到画布上时缩放图像的尺寸。

我建议您查看该页面，它有很多很好的信息，例如

• 使用data:网址
• 处理图像加载
• 从视频加载静止帧
• 切片
• 例子丰富

Answer 2

创建一个图像，处理onload事件，在该事件中，您将画布大小更新为图像的缩放大小，然后使用缩放绘制图像。

var scale = 2            ;
var ballPic = new Image();

ballPic.onload = function drawImage() {
     var c=document.getElementById("myCanvas");
     c.width  = ballPic.width * scale  ;
     c.height = ballPic.height * scale ; 
     var ctx=c.getContext("2d");
     ctx.scale(scale, scale)   ;
     ctx.drawImage(ballPic, 0, 0);  
};

ballPic.src =
   'http://melinabeachturtlehatchery.files.wordpress.com/2010/07/turtle4.jpg';

小提琴在这里：

http://jsbin.com/etemox/1/edit