详解如何用HTML5 Canvas API控制图片的缩放变换_html5教程技巧

缩放变换scale(sx,sy)传入两个参数，分别是水平方向和垂直方向上对象的缩放倍数。例如context.scale(2,2)就是对图像放大两倍。其实，看上去简单，实际用起来还是有一些问题的。我们来看一段代码：

2. "zh">
4. "UTF-8">
10. "canvas">
11. 你的浏览器居然不支持Canvas？！赶快换一个吧！！

运行结果：

其实缩放很简单，稍微复杂的是，如何让鼠标成为放大或者缩小的中心。如果数学几何不好，计算公式就可能看不明白了。

1. canvas.onmousewheel=canvas.onwheel=function(event){//chrome firefox浏览器兼容
2. var pos=windowToCanvas(canvas,event.clientX,event.clientY);
3. event.wheelDelta=event.wheelDelta?event.wheelDelta:(event.deltaY*(-40));
4. if(event.wheelDelta>0){
5. imgScale*=2;
6. imgX=imgX*2-pos.x;
7. imgY=imgY*2-pos.y;
8. }else{
9. imgScale/=2;
10. imgX=imgX*0.5+pos.x*0.5;
11. imgY=imgY*0.5+pos.y*0.5;
12. }
13. drawImage();
14. }

　　这个时候，基本功能就实现了，加载一张图片和加载多张图片都差不多，维护每一张图片的位置和大小，下面来整理一下代码吧。

1. var canvas,context;
2. var img,//图片对象
3. imgIsLoaded,//图片是否加载完成;
4. imgX=0,
5. imgY=0,
6. imgScale=1;
8. (function int(){
9. canvas=document.getElementById('canvas');
10. context=canvas.getContext('2d');
11. loadImg();
12. })();
14. function loadImg(){
15. img=new Image();
16. img.onload=function(){
17. imgIsLoaded=true;
18. drawImage();
19. }
20. img.src="map.jpg";
21. }
23. function drawImage(){
24. context.clearRect(0,0,canvas.width,canvas.height);
25. context.drawImage(img,0,0,img.width,img.height,imgX,imgY,img.width*imgScale,img.height*imgScale);
26. }
28. canvas.onmousedown=function(event){
29. var pos=windowToCanvas(canvas,event.clientX,event.clientY);
30. canvas.onmousemove=function(event){
31. canvas.style.cursor="move";
32. var pos1=windowToCanvas(canvas,event.clientX,event.clientY);
33. var x=pos1.x-pos.x;
34. var y=pos1.y-pos.y;
35. pos=pos1;
36. imgX+=x;
37. imgY+=y;
38. drawImage();
39. }
40. canvas.onmouseup=function(){