1

嗨，我有一个简单的问题，我 [似乎无法在 google 上找到答案。我正在尝试在画布上绘制图像。我最初使用了“新”构造函数（ 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 = 这样的变量与使用构造函数时的元素本身不同吗？除了将其附加到文档并使用 getElementbyID 之外，我将如何传递它？

4

2 回答 2

1

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

来自 MDN：

drawImage() 方法的第二个变体添加了两个新参数，让我们可以在画布上放置缩放的图像。

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

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

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

  • 使用data:网址
  • 处理图像加载
  • 从视频中加载静止帧
  • 切片
  • 例子
于 2013-07-13T02:32:11.507 回答
0

创建一个图像，处理 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

于 2013-07-13T10:12:19.747 回答