検索
ホームページウェブフロントエンドH5 チュートリアル详解如何用HTML5 Canvas API控制图片的缩放变换_html5教程技巧

缩放变换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()。

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

    声明
    この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
    H5およびHTML5:Web開発で一般的に使用される用語H5およびHTML5:Web開発で一般的に使用される用語Apr 13, 2025 am 12:01 AM

    H5とHTML5は、同じこと、つまりHTML5を参照します。 HTML5はHTMLの5番目のバージョンであり、セマンティックタグ、マルチメディアサポート、キャンバスとグラフィックス、オフラインストレージ、ローカルストレージなどの新しい機能をもたらし、Webページの表現力と互換性を向上させます。

    H5は何を参照していますか?コンテキストの探索H5は何を参照していますか?コンテキストの探索Apr 12, 2025 am 12:03 AM

    H5ReferStoHtml5、apivotaltechnologyinwebdevelopment.1)html5introduceSnewelementsandapisforrich、dynamicwebapplications.2)Itupp ortsmultimediawithoutplugins、endancingurexperiencecrossdevices.3)semanticelementsimprovecontentstructurendseo.4)H5'srespo

    H5:ツール、フレームワーク、およびベストプラクティスH5:ツール、フレームワーク、およびベストプラクティスApr 11, 2025 am 12:11 AM

    H5開発で習得する必要があるツールとフレームワークには、Vue.JS、React、Webpackが含まれます。 1.Vue.jsは、ユーザーインターフェイスの構築に適しており、コンポーネント開発をサポートします。 2.複雑なアプリケーションに適した仮想DOMを介したページレンダリングを最適化します。 3.Webpackは、モジュールのパッケージングに使用され、リソースの読み込みを最適化します。

    HTML5の遺産:現在のH5の理解HTML5の遺産:現在のH5の理解Apr 10, 2025 am 09:28 AM

    html5hassificlytransformdedwebdeveverment byintroducingsingingelements、endincemultimediasupport、およびrequrovingperformance.1)itmadewebsitesmoreaccessibleandseo-frendlywithsemantelementslike、and.2)

    H5コード:アクセシビリティとセマンティックHTMLH5コード:アクセシビリティとセマンティックHTMLApr 09, 2025 am 12:05 AM

    H5は、セマンティック要素とARIA属性を介して、WebページのアクセシビリティとSEO効果を改善します。 1.使用などを使用して、コンテンツ構造を整理し、SEOを改善します。 2。ARIA-LabelなどのARIA属性はアクセシビリティを強化し、支援技術ユーザーはWebページをスムーズに使用できます。

    H5はHTML5と同じですか?H5はHTML5と同じですか?Apr 08, 2025 am 12:16 AM

    「H5」と「HTML5」はほとんどの場合同じですが、特定の特定のシナリオでは異なる意味を持つ可能性があります。 1。「HTML5」は、新しいタグとAPIを含むW3C定義標準です。 2。 "H5"は通常、HTML5の略語ですが、モバイル開発では、HTML5に基づくフレームワークを参照する場合があります。これらの違いを理解することは、プロジェクトでこれらの用語を正確に使用するのに役立ちます。

    H5の機能は何ですか?H5の機能は何ですか?Apr 07, 2025 am 12:10 AM

    H5、またはHTML5は、HTMLの5番目のバージョンです。開発者により強力なツールセットを提供し、複雑なWebアプリケーションを簡単に作成できるようにします。 H5のコア関数には、次のものが含まれます。1)Webページにグラフィックとアニメーションを描画できる要素。 2)Webページ構造をSEOの最適化を明確かつ助長させるなどのセマンティックタグなど。 3)Geolocationapiなどの新しいAPIは、ロケーションベースのサービスをサポートします。 4)互換性テストとポリフィルライブラリを通じて、クロスブラウザーの互換性を確保する必要があります。

    H5リンクの実行方法H5リンクの実行方法Apr 06, 2025 pm 12:39 PM

    H5リンクを作成する方法は?リンクターゲットを決定します。H5ページまたはアプリケーションのURLを取得します。 HTMLアンカーの作成:&lt; a&gt;を使用しますアンカーを作成し、リンクターゲットURLを指定するタグ。リンクプロパティの設定(オプション):必要に応じて、ターゲット、タイトル、およびオンクリックプロパティを設定します。 Webページに追加:リンクを表示するWebページにHTMLアンカーコードを追加します。

    See all articles

    ホットAIツール

    Undresser.AI Undress

    Undresser.AI Undress

    リアルなヌード写真を作成する AI 搭載アプリ

    AI Clothes Remover

    AI Clothes Remover

    写真から衣服を削除するオンライン AI ツール。

    Undress AI Tool

    Undress AI Tool

    脱衣画像を無料で

    Clothoff.io

    Clothoff.io

    AI衣類リムーバー

    AI Hentai Generator

    AI Hentai Generator

    AIヘンタイを無料で生成します。

    ホットツール

    MinGW - Minimalist GNU for Windows

    MinGW - Minimalist GNU for Windows

    このプロジェクトは osdn.net/projects/mingw に移行中です。引き続きそこでフォローしていただけます。 MinGW: GNU Compiler Collection (GCC) のネイティブ Windows ポートであり、ネイティブ Windows アプリケーションを構築するための自由に配布可能なインポート ライブラリとヘッダー ファイルであり、C99 機能をサポートする MSVC ランタイムの拡張機能が含まれています。すべての MinGW ソフトウェアは 64 ビット Windows プラットフォームで実行できます。

    WebStorm Mac版

    WebStorm Mac版

    便利なJavaScript開発ツール

    SecLists

    SecLists

    SecLists は、セキュリティ テスターの究極の相棒です。これは、セキュリティ評価中に頻繁に使用されるさまざまな種類のリストを 1 か所にまとめたものです。 SecLists は、セキュリティ テスターが必要とする可能性のあるすべてのリストを便利に提供することで、セキュリティ テストをより効率的かつ生産的にするのに役立ちます。リストの種類には、ユーザー名、パスワード、URL、ファジング ペイロード、機密データ パターン、Web シェルなどが含まれます。テスターはこのリポジトリを新しいテスト マシンにプルするだけで、必要なあらゆる種類のリストにアクセスできるようになります。

    Dreamweaver Mac版

    Dreamweaver Mac版

    ビジュアル Web 開発ツール

    Safe Exam Browser

    Safe Exam Browser

    Safe Exam Browser は、オンライン試験を安全に受験するための安全なブラウザ環境です。このソフトウェアは、あらゆるコンピュータを安全なワークステーションに変えます。あらゆるユーティリティへのアクセスを制御し、学生が無許可のリソースを使用するのを防ぎます。