Javascript 调整画布上图像的大小并重新定位调整大小

我有一张画在画布上的图像和它的坐标。e、 g

var data = {
 x: 100, y: 100, // the coord when the image drawn
 src: imguri, 
 scale: 1.6 // the scale when the image drawn
}

以及如下所示的缩放功能

var scale = 1.6, width = canvas.width, height = canvas.height

function zoom(positiveOrNegative) {
 scale += positiveOrNegative * .2
 canvas.width = width * scale
 canvas.height = height * scale
 loadImage() 
}

function loadImage() {
 var img = new Image()
 img.src = data.src;
 img.onload = function() { context.drawImage(img, data.x, data.y) }
}

---

调整画布大小时，如何调整图像大小并重新定位，使其看起来像已放大/缩小？

使用此方法获取位置值

如果你把

var posX = 10

此变量是固定的，但如果不使用变量使用方法：

 VIEW.W(2)  // this is 2% from window width . 

在这种情况下，不需要对调整大小进行任何计算。 另外，您的示例没有缩放效果，只需调整画布标记元素的大小

缩放步骤：

   //context.save();
   context.translate( x , y );
   context.scale(scale, scale); 
   //context.restore();

这里的目标是：

var VIEW = {

 W :  function(per){

    if (typeof per === 'undefined'){
        return window.innerWidth;
    }else{
        return window.innerWidth/100 * per;
    }

 },
 H :  function(per){

    if (typeof per === 'undefined'){
        return window.innerHeight;
    }
    else{
        return window.innerHeight/100 * per;
    }

},

ASPECT : function(){

    return window.innerWidth / window.innerHeight;

},

};

奖励链接：