html图像ID和画布

Question

嗨，我有一个简单的问题，我可以'似乎找到答案在谷歌。我试图在画布上绘制图像。我最初使用了“新”构造函数（ballPic = new Image（）; ballPic.src =“ball.png”），它在我的画布上绘制时起作用，但我需要做一些缩放并且不确定是否可以附着一个CSS对象的ID。所以我反而试图使用图片标签，并在CSS中完成其余部分。

但是使用变量的方式doenst似乎与我的画布绘制工作：

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功能的另一种方法重载：

From MDN：

的的drawImage（）方法的第二个变种是增加了两个新的参数，让我们在画布上放置缩放图像。

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

这增加了的宽度和高度参数，其指示的大小，其是按比例的图像绘制到画布时它。

我建议你检查出该网页，它有很多很好的信息，像

• 使用data:网址
• 处理图像加载
• 加载还是从视频帧
• 切片
• 示例gall 012

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