如何利用HTML5 canvas旋转图片？（实例演示）_亿码酷站_编程开发技术教程

【亿码酷站-编程开发教程】收集全网优质教程及源码资源！

全网优质软件开发、平面设计等教程及精品源码资源一站可得,www.ymkuzhan.com！

最近突然想研究一下js旋转图片的功能。对于之前的实现方式，就不先说了。现在HTML5很不错，主要了解一下HTML5中的图片旋转吧。

原理：利用canvas对象来旋转。

实现方式：首先创建一个canvas元素，然后把img元素绘入canvas。但是，实际上，这是默认情况，就是图片没旋转时。如果图片要旋转90度的话，就需要先把canvas画布旋转90度后再绘图。

描述如下：

内部旋转原理是这样的，图片的坐标是从左上角开始计算，向右为x正方向，向下为y正方向，在旋转画布canvas时，实际上是这个坐标在旋转，所以最后绘图方式不一样。

当时我还用了picpick来测量旋转一定角度后起点坐标，才知道原来旋转是这样的。

代码：

<body>  
    <button onclick="rotateImg('testImg', 'left')">向左旋转</button>  
    <button onclick="rotateImg('testImg', 'right')">向右旋转</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('step');  
        if (step == null) {  
            step = min_step;  
        }  
        if (direction == 'right') {  
            step++;  
            //旋转到原位置，即超过最大值  
            step > max_step && (step = min_step);  
        } else {  
            step--;  
            step < min_step && (step = max_step);  
        }  
        img.setAttribute('step', step);  
        var canvas = document.getElementById('pic_' + pid);  
        if (canvas == null) {  
            img.style.display = 'none';  
            canvas = document.createElement('canvas');  
            canvas.setAttribute('id', 'pic_' + pid);  
            img.parentNode.appendChild(canvas);  
        }  
        //旋转角度以弧度值为参数  
        var degree = step * 90 * Math.PI / 180;  
        var ctx = canvas.getContext('2d');  
        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就不用解释了吧，应该。rotate应该也不用吧？关键是drawImage(img, x, y);

其中的x，y是指从哪一点开始画，因为整个坐标系统旋转了，所以，x，y不一样，比如step=1，图片向右旋转了90度，即坐标系旋转了90度，那么起始位置应该是x = 0, y= img.height

如何利用HTML5 canvas旋转图片？（实例演示）
—–文章转载自PHP中文网如有侵权请联系admin#tyuanma.cn删除

了解一些提高前端开发效率的 CSS 属性选择器_编程技术_编程开发技术教程

转载请注明来源：如何利用HTML5 canvas旋转图片？（实例演示）_亿码酷站_编程开发技术教程
本文永久链接地址：https://www.ymkuzhan.com/6351.html

下载声明：

本站资源如无特殊说明默认解压密码为www.ymkuzhan.com建议使用WinRAR解压；

本站资源来源于用户分享、互换、购买以及网络收集等渠道，本站不提供任何技术服务及有偿服务，资源仅提供给大家学习研究请勿作它用。

赞助本站仅为维持服务器日常运行并非购买程序及源码费用因此不提供任何技术支持，如果你喜欢该程序，请购买正版!

免责声明：

您好，本站所有资源(包括但不限于：源码、素材、工具、字体、图像、模板等)均为用户分享、互换、购买以及网络收集而来，并未取得原始权利人授权，因此禁止一切商用行为，仅可用于个人研究学习使用。请务必于下载后24小时内彻底删除，一切因下载人使用所引起的法律相关责任，包括但不限于:侵权,索赔,法律责任,刑事责任等相关责任,全部由下载人/使用人,全部承担。以上说明,一经发布视为您已全部阅读，理解、同意以上内容，如对以上内容持有异议，请勿下载，谢谢配合！支持正版，人人有责，如不慎对您的合法权益构成侵犯，请联系我们对相应内容进行删除，谢谢！