Question

drawImage()函数不遵循函数参数来绘制图像。笑脸的原始尺寸为213px（宽度）和212px（高度）。图像绘制得太大。绘制图像的高度为500px，绘制图像的宽度约为400px（压缩）。

我更改了下面显示的代码。有用。图像将以213x212大小完美地绘制。但是，我不能使用变量width和height作为实际参数。即

ctx.drawImage(smiley, sx, sy, swidth, sheight, x, y, width, height);

将不会绘制图像！现在我可以指定任何尺寸，例如

ctx.drawImage(smiley, sx, sy, swidth, sheight, x, y, 500, 500);

将以500x500大小完美地绘制图像。
我想知道语句到底是什么

var width = c.setAttribute("width", "500");

是吗？我使用调试器检查变量宽度，它不包含任何值。嗯...
如果删除语句var width = c.setAttribute("width", "500");，将根本不会绘制图像！
希望有人能解释它。

var smiley = new Image();
smiley.src = "images/smiley.jpg";
window.onload = function () {
    var c = document.getElementById("mypic");
    var ctx = c.getContext("2d");
    var sx = 0;
    var sy = 0;
    var swidth = smiley.width;
    var sheight = smiley.height;
    var x = 0;
    var y = 0;

    //the following three lines are the original code
    //and is not working properly.
    //var width = smiley.width;
    //var height = smiley.height;
    //ctx.drawImage(smiley, sx, sy, swidth, sheight, x, y, width, height);      

    //Now, it is working fine        
    var width = c.setAttribute("width", "500");
    var height = c.setAttribute("height", "500");
    ctx.drawImage(smiley, sx, sy, swidth, sheight, x, y, 213, 212);
};

canvas {
  background-color:green;
  width: 500px;
  height: 500px;
}

<canvas id="mypic" ></canvas>

Answer 1

这里没有什么要考虑的：首先是它不是window.onload，它应该是图像对象onload。然后，您可以根据要绘制的图像的实际大小设置画布的高度和宽度。这是它的快速预览。

var c = document.getElementById('canvas')
var ctx = c.getContext('2d')
var img = new Image();
img.src = 'https://upload.wikimedia.org/wikipedia/commons/thumb/e/e0/SNice.svg/220px-SNice.svg.png'

img.onload = function() {
  c.width = img.width;
  c.height = img.height;
  ctx.drawImage(img, 0, 0, img.width, img.height);
};

<canvas id="canvas" ></canvas>

有人可以解释我的代码为什么起作用吗？

1 个答案: