Question

我试图做一些非常简单的事情。我想从文档中获取图像。将其绘制到屏幕上。并且能够将此图像的高度和宽度调整为我选择的大小。我现在所拥有的根本不会改变大小。我究竟做错了什么？我不想使用除Javascript之外的任何东西。

var ctx = document.getElementById('mycanvas').getContext('2d');
var img = new Image();

function draw(){
    img.onload = function(){
    ctx.drawImage(img,100,100);
    };

img.style.height = '300px';
img.style.width = '300px';
img.src = "test.png";
}

draw();

Answer 1

context.drawImage还有其他参数可以为你调整大小：

var img=new Image();
img.onload=function(){
    var scaleFactor=2.00;
    ctx.drawImage(
        img,
        100,100,
        img.width*scaleFactor,img.height*scaleFactor
    );    
}
img.src='test.png'

Javascript如何更改图像src的高度和宽度

1 个答案: