詳解如何用HTML5 Canvas API控制圖片的縮放變換

2020-03-24 16:53:27

字體：大中小

來源：轉載

供稿：網友

縮放變換scale(sx,sy)傳入兩個參數，分別是水平方向和垂直方向上對象的縮放倍數。例如context.scale(2,2)就是對圖像放大兩倍。其實，看上去簡單，實際用起來還是有一些問題的。我們來看一段代碼：JavaScript Code復制內容到剪貼板
style body{background:url( ./images/bg3.jpg )repeat;} #canvas{border:1pxsolid#aaaaaa;display:block;margin:50pxauto;} /style /head body divid= canvas-warp canvasid= canvas 你的瀏覽器居然不支持Canvas？！趕快換一個吧！！ /canvas /div script window.onload=function(){ varcanvas=document.getElementById( canvas ); canvas.width=800; canvas.height=600; varcontext=canvas.getContext( 2d ); context.fillStyle= #FFF ; context.fillRect(0,0,800,600); context.strokeStyle= red ; context.lineWidth=5; for(vari=1;i 4;i++){ context.save(); context.scale(i,i); context.strokeRect(50,50,150,100); context.restore(); } }; /script /body /html
運行結果：
其實縮放很簡單，稍微復雜的是，如何讓鼠標成為放大或者縮小的中心。如果數學幾何不好，計算公式就可能看不明白了。JavaScript Code復制內容到剪貼板
canvas.onmousewheel=canvas.onwheel=function(event){//chromefirefox瀏覽器兼容 varpos=windowToCanvas(canvas,event.clientX,event.clientY); event.wheelDelta=event.wheelDelta?event.wheelDelta:(event.deltaY*(-40)); if(event.wheelDelta 0){ imgScale*=2; imgX=imgX*2-pos.x; imgY=imgY*2-pos.y; }else{ imgScale/=2; imgX=imgX*0.5+pos.x*0.5; imgY=imgY*0.5+pos.y*0.5; } drawImage(); }
這個時候，基本功能就實現了，加載一張圖片和加載多張圖片都差不多，維護每一張圖片的位置和大小，下面來整理一下代碼吧。JavaScript Code復制內容到剪貼板
canvas=document.getElementById('canvas'); context=canvas.getContext('2d'); loadImg(); })(); functionloadImg(){ img=newImage(); img.onload=function(){ imgIsLoaded=true; drawImage(); } img.src= map.jpg ; } functiondrawImage(){ context.clearRect(0,0,canvas.width,canvas.height); context.drawImage(img,0,0,img.width,img.height,imgX,imgY,img.width*imgScale,img.height*imgScale); } canvas.onmousedown=function(event){ varpos=windowToCanvas(canvas,event.clientX,event.clientY); canvas.onmousemove=function(event){ canvas.style.cursor= move ; varpos1=windowToCanvas(canvas,event.clientX,event.clientY); varx=pos1.x-pos.x; vary=pos1.y-pos.y; pos=pos1; imgX+=x; imgY+=y; drawImage(); } canvas.onmouseup=function(){ canvas.onmousemove=null; canvas.onmouseup=null; canvas.style.cursor= default ; } } canvas.onmousewheel=canvas.onwheel=function(event){ varpos=windowToCanvas(canvas,event.clientX,event.clientY); event.wheelDelta=event.wheelDelta?event.wheelDelta:(event.deltaY*(-40)); if(event.wheelDelta 0){ imgScale*=2; imgX=imgX*2-pos.x; imgY=imgY*2-pos.y; }else{ imgScale/=2; imgX=imgX*0.5+pos.x*0.5; imgY=imgY*0.5+pos.y*0.5; } drawImage(); } functionwindowToCanvas(canvas,x,y){ varbbox=canvas.getBoundingClientRect(); return{ x:x-bbox.left-(bbox.width-canvas.width)/2, y:y-bbox.top-(bbox.height-canvas.height)/2 }; }
縮放變換應注意的問題
看了上面的例子，大家一定對產生的結果有點奇怪。一是左上角頂點的坐標變了，而是線條的粗細也變了。因此，對于縮放變換有兩點問題需要注意：縮放時，圖像左上角坐標的位置也會對應縮放。
縮放時，圖像線條的粗細也會對應縮放。
比如對于最小的那個原始矩形，它左上角的坐標是（50，50），線條寬度是5px，但是放大2倍后，左上角坐標變成了（100，100），線條寬度變成了10px。這就是縮放變換的副作用。童鞋們一定在期待著我說解決副作用的途徑。很遺憾，沒有什么好的方法去解決這些副作用。如果想固定左上角坐標縮放，可以把左上角坐標變成（0，0），這樣的話無論是什么倍數，0乘上它還是0，所以不變。如果不想讓線條粗細變化，那就別使用線條。或者自己封裝一個函數，不要使用scale()。究其根本，之前我們說過平移變換、旋轉變換、縮放變換都屬于坐標變換，或者說是畫布變換。因此，縮放并非縮放的是圖像，而是整個坐標系、整個畫布！就像是對坐標系的單位距離縮放了一樣，所以坐標和線條都會進行縮放。仔細想想，這一切貌似挺神奇的。html教程

鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。

上一篇：html里table是什么

下一篇：HTML實現遮罩層的方法 HTML中如何使用遮罩層