Gemeinschaft Lernen Tools-Bibliothek Freizeit
suchen
Deutsch
Heim > Web-Frontend > H5-Tutorial > 详解如何用HTML5 Canvas API控制图片的缩放变换_html5教程技巧

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

WBOY
Freigeben： 2016-05-23 14:20:14
Original
1500 Leute haben es durchsucht

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

JavaScript Code复制内容到剪贴板
  1. nbsp;html>   
  2. "zh">   
  3.   
  4.      "UTF-8">   
  5.     缩放变换   
  6.     
  7.         body { background: url("./images/bg3.jpg") repeat; }  
  8.         #canvas { border: 1px solid #aaaaaa; display: block; margin: 50px auto; }   
  9.        
  10.   
  11.   
  12. "canvas-warp">   
  13.     "canvas">   
  14.         你的浏览器居然不支持Canvas？！赶快换一个吧！！   
  15.        
  
  •   
  • <script> </script>
  •     window.onload = function(){   
  •         var canvas = document.getElementById("canvas");   
  •         canvas.width = 800;   
  •         canvas.height = 600;   
  •         var context = canvas.getContext("2d");   
  •         context.fillStyle = "#FFF";   
  •         context.fillRect(0,0,800,600);   
  •   
  •         context.strokeStyle = "red";   
  •         context.lineWidth = 5;   
  •         for(var i = 1; i 
  •             context.save();   
  •             context.scale(i,i);   
  •             context.strokeRect(50,50,150,100);   
  •             context.restore();   
  •         }   
  •     };   
  •   
  •   
  •   

    • 运行结果：
    2016322115330220.jpg (850×500)

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

    JavaScript Code复制内容到剪贴板
    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. }  

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

    JavaScript Code复制内容到剪贴板
    1. var canvas,context;   
    2. var img,//图片对象   
    3.     imgIsLoaded,//图片是否加载完成;   
    4.     imgX=0,   
    5.     imgY=0,   
    6.     imgScale=1;   
    7.     
    8. (function int(){   
    9.     canvas=document.getElementById('canvas');   
    10.     context=canvas.getContext('2d');   
    11.     loadImg();   
    12. })();   
    13.     
    14. function loadImg(){   
    15.     img=new Image();   
    16.     img.onload=function(){   
    17.         imgIsLoaded=true;   
    18.         drawImage();   
    19.     }   
    20.     img.src="map.jpg";   
    21. }   
    22.     
    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. }   
    27.     
    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(){   
    41.         canvas.onmousemove=null;   
    42.         canvas.onmouseup=null;   
    43.         canvas.style.cursor="default";   
    44.     }   
    45. }   
    46. canvas.onmousewheel=canvas.onwheel=function(event){   
    47.     var pos=windowToCanvas(canvas,event.clientX,event.clientY);   
    48.     event.wheelDelta=event.wheelDelta?event.wheelDelta:(event.deltaY*(-40));   
    49.     if(event.wheelDelta>0){   
    50.         imgScale*=2;   
    51.         imgX=imgX*2-pos.x;   
    52.         imgY=imgY*2-pos.y;   
    53.     }else{   
    54.         imgScale/=2;   
    55.         imgX=imgX*0.5+pos.x*0.5;   
    56.         imgY=imgY*0.5+pos.y*0.5;   
    57.     }   
    58.     drawImage();   
    59. }   
    60.     
    61. function windowToCanvas(canvas,x,y){   
    62.     var bbox = canvas.getBoundingClientRect();   
    63.     return {   
    64.         x:x - bbox.left - (bbox.width - canvas.width) / 2,   
    65.         y:y - bbox.top - (bbox.height - canvas.height) / 2   
    66.     };   
    67. }  

    缩放变换应注意的问题
    看了上面的例子，大家一定对产生的结果有点奇怪。一是左上角顶点的坐标变了，而是线条的粗细也变了。因此，对于缩放变换有两点问题需要注意：

    缩放时，图像左上角坐标的位置也会对应缩放。
    缩放时，图像线条的粗细也会对应缩放。
    比如对于最小的那个原始矩形，它左上角的坐标是（50，50），线条宽度是5px，但是放大2倍后，左上角坐标变成了（100，100），线条宽度变成了10px。这就是缩放变换的副作用。

    童鞋们一定在期待着我说解决副作用的途径。很遗憾，没有什么好的方法去解决这些副作用。如果想固定左上角坐标缩放，可以把左上角坐标变成（0，0），这样的话无论是什么倍数，0乘上它还是0，所以不变。如果不想让线条粗细变化，那就别使用线条。或者自己封装一个函数，不要使用scale()。

    究其根本，之前我们说过平移变换、旋转变换、缩放变换都属于坐标变换，或者说是画布变换。因此，缩放并非缩放的是图像，而是整个坐标系、整个画布！就像是对坐标系的单位距离缩放了一样，所以坐标和线条都会进行缩放。仔细想想，这一切貌似挺神奇的。

    Verwandte Etiketten：
    canvas html5 缩放
    Quelle：php.cn
    Vorheriger Artikel：HTML5+Canvas+CSS3实现齐天大圣孙悟空腾云驾雾效果_html5教程技巧 Nächster Artikel：移动端通过HTML5实现文件上传功能
    Erklärung dieser Website
    Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
    Neueste Artikel des Autors
    Aktuelle Ausgaben
    Wie kann ich dafür sorgen, dass mein Bild auf der Hauptanzeige der Seite erscheint? Ich möchte einige Fotos über NASAAPI erhalten. Diese Fotos werden dann im Miniaturbild und...
    Aus 2024-04-06 15:33:12
    0
    1
    433
    Können PDF-Dateien mit HTML5 und Javascript ausgeführt werden? Ich habe die dumme Idee, ein Programm zu erstellen, das auf keinem Computer blockiert wird...
    Aus 2024-04-05 12:57:00
    0
    1
    456
    Was ist der Unterschied zwischen enctype und formenctype in HTML5? Ich frage mich nur, was der Unterschied zwischen den Attributen enctype und formenctype in...
    Aus 2024-04-02 11:47:56
    0
    1
    275
    Die Seite mobilfreundlich gestalten? Ich habe viele Webseiten und einige Websites. Die Sache ist, ich bin ein Anfänger. Ich ver...
    Aus 2024-04-01 20:42:38
    0
    1
    259
    verwandte Themen
    Mehr>
    Beliebte Empfehlungen
    Beliebte Tutorials
    Mehr>
    Verwandte Tutorials
    Beliebte Empfehlungen
    Aktuelle Kurse
    Neueste Downloads
    Mehr>
    Web-Effekte
    Quellcode der Website
    Website-Materialien
    Frontend-Vorlage