有人可以解释我的代码,为什么它的工作原理?

问题描述 投票:0回答:1

drawImage()功能不遵循函数的参数绘制图像。笑脸的原始尺寸为213px(宽度)和212px(高度)。该图像是吸引了过大。德鲁图像的高度为500像素和德鲁图像的宽度是400像素左右(挤压)。

我已经改变了如下我的代码。有用。图像将被绘制完美的罚款与大小213x212。但是,我不能使用变量宽度和高度的实际参数。即

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

图像将无法绘制!现在,我可以如指定任何尺寸

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

图像将被绘制大小500×500完美的罚款。 我想知道究竟是什么的声明

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>
javascript html5
1个回答
0
投票

几件事情要考虑在这里:首先是它不是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>
© www.soinside.com 2019 - 2024. All rights reserved.