HTML5キャンバスを使用して画像を回転するにはどうすればよいですか? (デモンストレーション例)-htmlチュートリアル-php.cn

ホームページ

ウェブフロントエンド

htmlチュートリアル

HTML5キャンバスを使用して画像を回転するにはどうすればよいですか? (デモンストレーション例)

青灯夜游

Oct 20, 2020 pm 05:38 PM

canvashtml5

HTML5キャンバスを使用して画像を回転するにはどうすればよいですか? (デモンストレーション例)

最近、急にjsで画像を回転させる機能を勉強したくなりました。以前の実装方法については先に説明しません。 HTML5 はとても良くなりましたので、HTML5 における画像の回転を中心に理解しましょう。

デモの例:

http://www.imqing.com/demo/rotateImg.html

原則: 回転するにはキャンバスオブジェクトを使用します。

実装方法：まずcanvas要素を作成し、img要素をcanvas内に描画します。ただし、実際には、これは画像が回転されていないデフォルトの状況です。画像を 90 度回転する必要がある場合は、描画する前にキャンバスを 90 度回転する必要があります。

説明は次のとおりです:

内部回転の原理は次のとおりです。画像の座標は左上隅から計算されます。右が x の正方向、下が x 方向です。はy方向の正であり、キャンバスを回転させる場合、実際には座標が回転するため、最終的な描画方法が異なります。

その時、ピックピックを使って一定角度回転させた後の始点の座標を計測したところ、本来の回転はこうだったということに気づきました。

コード:

<body>  
    <button onclick="rotateImg(&#39;testImg&#39;, &#39;left&#39;)">向左旋转</button>  
    <button onclick="rotateImg(&#39;testImg&#39;, &#39;right&#39;)">向右旋转</button><br/>  
    <img  src="/static/imghwm/default1.png"  data-src="./test.jpg"  class="lazy"   id="testImg"/ alt="HTML5キャンバスを使用して画像を回転するにはどうすればよいですか? (デモンストレーション例)" >  
<script>  
    function rotateImg(pid, direction) {  
        //最小与最大旋转方向，图片旋转4次后回到原方向  
        var min_step = 0;  
        var max_step = 3;  
        var img = document.getElementById(pid);  
        if (img == null)return;  
        //img的高度和宽度不能在img元素隐藏后获取，否则会出错  
        var height = img.height;  
        var width = img.width;  
        var step = img.getAttribute(&#39;step&#39;);  
        if (step == null) {  
            step = min_step;  
        }  
        if (direction == &#39;right&#39;) {  
            step++;  
            //旋转到原位置，即超过最大值  
            step > max_step && (step = min_step);  
        } else {  
            step--;  
            step < min_step && (step = max_step);  
        }  
        img.setAttribute(&#39;step&#39;, step);  
        var canvas = document.getElementById(&#39;pic_&#39; + pid);  
        if (canvas == null) {  
            img.style.display = &#39;none&#39;;  
            canvas = document.createElement(&#39;canvas&#39;);  
            canvas.setAttribute(&#39;id&#39;, &#39;pic_&#39; + pid);  
            img.parentNode.appendChild(canvas);  
        }  
        //旋转角度以弧度值为参数  
        var degree = step * 90 * Math.PI / 180;  
        var ctx = canvas.getContext(&#39;2d&#39;);  
        switch (step) {  
            case 0:  
                canvas.width = width;  
                canvas.height = height;  
                ctx.drawImage(img, 0, 0);  
                break;  
            case 1:  
                canvas.width = height;  
                canvas.height = width;  
                ctx.rotate(degree);  
                ctx.drawImage(img, 0, -height);  
                break;  
            case 2:  
                canvas.width = width;  
                canvas.height = height;  
                ctx.rotate(degree);  
                ctx.drawImage(img, -width, -height);  
                break;  
            case 3:  
                canvas.width = height;  
                canvas.height = width;  
                ctx.rotate(degree);  
                ctx.drawImage(img, -width, 0);  
                break;  
        }  
    }  
</script>  
</body>

説明: Canvas.width と height については説明する必要はありません。回転させる必要はないはずですよね？キーは drawImage(img, x, y);

x と y は描画を開始する点を参照します。座標系全体が回転するため、x と y は異なります. 、たとえば step=1 の場合、画像は右に 90 度回転します。つまり、座標系が 90 度回転すると、開始位置は x = 0, y= になります。 img.height

以上がHTML5キャンバスを使用して画像を回転するにはどうすればよいですか? (デモンストレーション例)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明

この記事は51ctoで複製されています。侵害がある場合は、admin@php.cn までご連絡ください。

HTMLの役割：Webコンテンツの構造Apr 11, 2025 am 12:12 AM

HTMLの役割は、タグと属性を使用してWebページの構造とコンテンツを定義することです。 1。HTMLは、読みやすく理解しやすいようなタグを介してコンテンツを整理します。 2。アクセシビリティとSEOを強化するには、セマンティックタグなどを使用します。 3. HTMLコードの最適化により、Webページの読み込み速度とユーザーエクスペリエンスが向上する可能性があります。

HTMLとコード：用語を詳しく見るApr 10, 2025 am 09:28 AM

htmlisaspecifictypeofcodefocuseduructuringwebcontent

HTML、CSS、およびJavaScript：Web開発者に不可欠なツールApr 09, 2025 am 12:12 AM

HTML、CSS、およびJavaScriptは、Web開発の3つの柱です。 1。HTMLは、Webページ構造を定義し、などなどのタグを使用します。2。CSSは、色、フォントサイズなどのセレクターと属性を使用してWebページスタイルを制御します。

HTML、CSS、およびJavaScriptの役割：コアの責任Apr 08, 2025 pm 07:05 PM

HTMLはWeb構造を定義し、CSSはスタイルとレイアウトを担当し、JavaScriptは動的な相互作用を提供します。 3人はWeb開発で職務を遂行し、共同でカラフルなWebサイトを構築します。

HTMLは初心者のために簡単に学ぶことができますか？Apr 07, 2025 am 12:11 AM

HTMLは、簡単に学習しやすく、結果をすばやく見ることができるため、初心者に適しています。 1）HTMLの学習曲線はスムーズで簡単に開始できます。 2）基本タグをマスターして、Webページの作成を開始します。 3）柔軟性が高く、CSSおよびJavaScriptと組み合わせて使用できます。 4）豊富な学習リソースと最新のツールは、学習プロセスをサポートしています。

HTMLでの開始タグの例は何ですか？Apr 06, 2025 am 12:04 AM

Anexampleapalofastartingtaginhtmlis、それはaperginsaparagraph.startingtagsaresentionentientiontheyinitiateelements、definetheirtypes、およびarecrucialforurturingwebpagesandcontingthomedomを構築します。