如何仅使用 javascript、html5 css3 实现 - 单击按钮时画布上图像的缩放效果？答案

【问题标题】：How to implement using javascript, html5 css3 only - zooming effect for image on canavs on button click?如何仅使用 javascript、html5 css3 实现 - 单击按钮时画布上图像的缩放效果？
【发布时间】：2015-07-17 21:32:06
【问题描述】：

我正在尝试使用比例，但它无法正常工作。请指教。

我的代码

function zoomIn() {                                                                   
    var canvas = document.getElementById('myCanvas');                                     
    var context = canvas.getContext('2d');
    context.scale(0.75, 0.75);                                                  
    context.drawImage(canvas, 0, 0);
    cleanTextOnCanvas();
}



function zoomOut() {
    var canvas = document.getElementById('myCanvas')                                          
    var context = canvas.getContext('2d');
    context.scale(1.5, 1.5);
    cleanCanvas();
    cleanTextOnCanvas();                                                 
}

谁能帮忙？

【问题讨论】：

标签： canvas draggable zooming

【解决方案1】：

有几种方法可以进行缩放。其中一些方法很快就会变得复杂。

我发现使用drawImage 的缩放版本而不是context.scale 缩放图像更简单。

使用drawImage 进行缩放的工作原理如下：

使用context.translate 将 [0,0] 原点重置为图像的中心点
使用 drawImage 的缩放版本以缩放后的大小和正确的左上角缩放和重新定位图像。

具有原始尺寸、缩小和放大的图像的画布

这是示例代码和演示：

var canvas=document.getElementById("myCanvas");
var context=canvas.getContext("2d");
var cw,ch,iw,ih;

var currentScale=1.00;

var img=new Image();
img.onload=start;
img.src="https://dl.dropboxusercontent.com/u/139992952/multple/flower.png";
function start(){

  // cache the image size and set the canvas size to image size
  cw=iw=canvas.width=img.width;
  ch=ih=canvas.height=img.height;

  // activate the zoom buttons
  document.getElementById('zoomOut').onclick=function(){
    currentScale/=1.1;
    zoom(currentScale);
  };
  document.getElementById('zoomIn').onclick=function(){
    currentScale*=1.1;
    zoom(currentScale);
  };

  zoom(currentScale);
}


function zoom(scale) {                                                                   
  // clear the canvas
  context.clearRect(0,0,cw,ch);
  // reset the [0,0] origin to the center 
  // of the canvas using context.translate
  context.translate(cw/2,ch/2);
  // redraw the image using the scaling version of drawImage
  var newWidth=iw*scale;
  var newHeight=ih*scale;
  context.drawImage(
    // our drawing source is the img
    img,
    // start with the entire img
    0,0,img.width,img.height,
    // draw the img at its scaled size
    // since [0,0] is now at center canvas, reset the x,y
    // as half the scaled image size
    -newWidth/2,-newHeight/2,newWidth,newHeight
  );
  // clean up, reset the canvas origin by undoing the last translate()
  context.translate(-cw/2,-ch/2);

  // do your stuff!
  // cleanTextOnCanvas();
}

body{ background-color: ivory; }
canvas{border:1px solid red;}

<button id='zoomOut'>Zoom Out</button>
<button id='zoomIn'>Zoom In</button>
<br>
<canvas id="myCanvas" width=300 height=300></canvas>

【讨论】：