canvas实现图像的缩放

这里需要注意的是如果你向canvas之中绘制的图像有一部分落在canvas之外，
那么浏览器就会将canvas范围外的那部分图像忽略掉

效果如图

下面的代码是参考教程精简后的部分 去掉了一部分多余的。

var canvas=document.getElementById("canvas")
var context=canvas.getContext("2d")

var image=new Image()
var scaleSlider=document.getElementById("scaleSlider")
var scale=1.0
var MINIMUM_SCALE=1.0
var MAXIMUN_SCALE=3.0

function drawImage(){
 var w=canvas.width
 var h=canvas.height
 var sw=w*scale
 var sh=h*scale
 context.clearRect(0,0,canvas.width,canvas.height)
 context.drawImage(image,-sw/2+w/2,-sh/2+h/2,sw,sh)

}
function drawScaleText(value){
  var text=parseFloat(value).toFixed(2)

  scaleOutput.innerText=text



}
scaleSlider.onchange=function(e){
  scale=e.target.value
  if(scale<MINIMUM_SCALE){scale=MINIMUM_SCALE}
    else if(scale>MAXIMUN_SCALE){scale=MAXIMUN_SCALE}
      drawScaleText(scale)
    drawImage()

}
image.src="./timg.jpg"
image.onload=function(e){
   drawImage()
   drawScaleText(scaleSlider.value)
}