Question

我试图简单地将图像加载到画布中，但它只会加载图像的前1/4，而不管正在使用的图像。任何协助赞赏。代码如下： -

  var canvas = document.getElementById('canvas');
  var context = canvas.getContext('2d');
  var img = new Image();

  img.onload = function() {
    context.drawImage(this, 0, 0);
  };
     img.src = 'img/test.jpg';

Answer 1

确保指定函数使用的不同参数。该函数将从图像绘制到画布，因此应手动设置“宽度”和“高度”属性，以确保不使用默认值。

drawImage(Img, Sx, Sy, Swidth, Sheight, X, Y Width, Height)

所有这些参数都可用，应尽可能使用。

Answer 2

作为Niet，Dark Absol说你需要设置画布以适合你的形象。

img.onload = function() {
  context.canvas.width = img.width;
  context.canvas.height = img.height;
  context.drawImage(this, 0, 0);
  };

Answer 3

将正确的评论转换为答案：

您似乎没有定义canvas.width或canvas.height（如果需要，也可以在包含<canvas width="..." height="..."></canvas>的HTML中完成此操作）

通过CSS设置画布的宽度和高度将拉伸绘图区域以覆盖目标大小，这不是一回事。

html5绘制图像仅显示图像的前1/4

3 个答案: