第一種方法，只出現(xiàn)圖片的左上角部分
var??canvasWidth?=?1152;
var?canvasHeight?=?768;
var?myCanvas?=?document.getElementById("myCanvas");
var?context;
var?image?=?new?Image();
var?scaleRange?=?document.getElementById("scaleRange");
var?scale?=?scaleRange.value;
window.onload?=?function()?{
myCanvas.width?=?canvasWidth;
myCanvas.height?=?canvasHeight;
if?(myCanvas.getContext)?{
context?=?myCanvas.getContext("2d");
image.src?=?"../../images/img-lg.jpg";
image.onload?=?function()?{
//context.drawImage(image,0,0,canvasWidth,canvasHeight);
drawImageByScale(scale);
}
}
}
function?drawImageByScale(scale){
var?scaleImageWidth?=?canvasWidth?*?scale;
var?scaleImageHeight?=?canvasHeight?*?scale;
var?sx?=?scaleImageWidth/2?-?canvasWidth/2;
var?sy?=?scaleImageHeight/2?-?canvasHeight/2;
context.drawImage(image,sx,sy,canvasWidth,canvasHeight,0,0,canvasWidth,canvasHeight)
}代碼里用的是老師的圖，用第一種方法實(shí)現(xiàn)的時(shí)候?qū)cale設(shè)置為1.0的時(shí)候只出現(xiàn)了圖片的左上角的部分：
我個(gè)人認(rèn)為這種實(shí)現(xiàn)方式是不是邏輯有點(diǎn)問題，因?yàn)閕mage-lg.jpg的圖像素本來就是canvas大小的三倍大，當(dāng)將scale設(shè)置為1.0時(shí)，最后一句畫圖的方法是：context.drawImage(image,0,0,canvasWidth,canvasHeight,0,0,canvasWidth,canvasHeight)
}
所以從原圖的0，0位置取得與canvas大小一樣的部分顯示在canvas中，所以出現(xiàn)了上圖的結(jié)果。
不知道理解的對不對，希望大神們可以指點(diǎn)一二~
2021-07-13
老師的第一種方法實(shí)現(xiàn)的有問題，sx和sy不是從原圖上算得，是從放大后的圖片算得，可以照著上一節(jié)ppt里的圖，在紙上畫一畫，就能找到正確的實(shí)現(xiàn)。
不過我比較好奇，老師的代碼不正確，頁面的效果是怎么出來的?
2016-06-29
老師的第一種方法代碼有誤，你可以根據(jù)思路自己編寫出來。
2016-06-21
圖片處理思路是這樣的：
1、用context.drawImage( img , x , y , dw , dh)方法繪制圖像
2、讓圖像（放大或縮小后的圖）的中心與畫布中心重疊，即水平垂直居中——設(shè)置的top和left即為y，x。圖像的大小和畫布大小都已知，故很容易得到y(tǒng),x。
然后context.drawImage( image , x , y?, scaleImageWidth, scaleImageHeight);
你這里調(diào)用的方法是錯(cuò)誤的?。?！