Javascript html图像id和画布

大家好，我有一个简单的问题，我在谷歌上找不到答案。我试图在画布上绘制一幅图像。我最初使用了“new”构造函数（ballPic=new image（）；ballPic.src=“ball.png”）当我在画布上画图时，它起作用了，但是我需要做一些缩放，并且不确定是否可以将css id附加到对象上。因此，我尝试使用图像标记，并在css中完成其余操作

但是，以这种方式使用变量似乎不适用于我的画布的绘图：

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

ballPic=”；
var c=document.getElementById（“myCanvas”）；
var ctx=c.getContext（“2d”）；
ctx.drawImage（BallPic，-25，-25）；

---

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

您可以继续使用

Image

构造函数并仍然缩放图像。还有另一个方法重载de>drawImage功能：

:

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

drawImage（图像、x、y、宽度、高度）

这将添加宽度和高度参数，指示在画布上绘制图像时缩放图像的大小

我建议你看看那个页面，它有很多好的信息，比如

• 使用

  数据：

  URL
• 处理图像加载
• 从视频加载静止帧
• 切片
• 加洛尔

---

您可以继续使用

图像

构造函数，仍然可以缩放图像。

drawImage

函数还有另一个方法重载：

:

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

drawImage（图像、x、y、宽度、高度）

这将添加宽度和高度参数，指示在画布上绘制图像时缩放图像的大小

我建议你看看那个页面，它有很多好的信息，比如

• 使用

  数据：

  URL
• 处理图像加载
• 从视频加载静止帧
• 切片
• 加洛尔

---

创建图像，处理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';

小提琴在这里：

---

创建图像，处理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';

小提琴在这里：

---

我想这是我第一次看到非匿名函数直接用于事件调用向量：）：）我经常为了清晰、调试、性能或内存分析而命名函数……有时非常有用。我想这是我第一次看到非匿名函数直接用于事件调用向量或者：）：）我经常为了清晰、调试和性能或内存分析的目的而命名函数……有时它非常有用。