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

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

青灯夜游

リリース： 2020-10-20 17:38:11

転載

4166 人が閲覧しました

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="./test.jpg" id="testImg"/>  
<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 サイトの他の関連記事を参照してください。