HTML5 旋转图像

最新推荐文章于 2021-06-23 20:27:37 发布

笑语轻柔

最新推荐文章于 2021-06-23 20:27:37 发布

阅读量695

点赞数

本文链接：https://blog.csdn.net/u012716909/article/details/51452260

版权

图像360度旋转：

html代码：

<%-- 
    Document   : 图像旋转
    Created on : 2016-5-19, 10:53:15
    Author     : Administrator
--%>

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>JSP Page</title>
    </head>
    <body>
        <image src="image/1.jpg" id="logo"/>
        <script>
            (function(){
                if(! window.addEventListener ){return ;}
                
                //canvas对象
                var canvas=null;
                //canvas的上下文对象
                var ctx=null;
                //动画的帧率
                var fps=60
                //图像对象
                var image=null;
                //旋转角度
                var deg=0;
                
                //页面导入时的事件处理
                window.addEventListener("load",function(){
                    
                    //img元素
                    image=document.getElementById("logo");
                    //图像尺寸
                    var w=parseInt(image.width);
                    var h=parseInt(image.height);
                    //创建canvas对象
                    canvas=document.createElement("canvas");
                    canvas.width=w;
                    canvas.height=h;
                    //canvas的上下文对象
                    ctx=canvas.getContext("2d");
                    //不支持canvas的浏览器返回
                    if( !ctx ){return ;}
                    
                    //将图像绘制如canvas中
                    ctx.drawImage(image, 0, 0);
                    //用canvas替换image元素
                    image.parentNode.replaceChild(canvas,image);
                    //canvas的动画开始
                    move();
                },false);
                //旋转动画
                function move(){
                    //canvas尺寸
                    var cw=parseInt(canvas.width);
                    var ch=parseInt(canvas.height);
                    
                    //初始化变形矩阵
                    ctx.setTransform(1,0,0,1,0,0);
                    //清空canvas
                    ctx.clearRect(0,0,cw,ch);
                    //计算变形矩阵
                    var m11=Math.cos(deg * Math.PI / 180);
                    var dx=(cw/2)-(cw * m11/2);
                    
                    //变形矩阵设置
                    ctx.setTransform(m11,0,0,1,dx,0);
                    //将变形后的图像绘制入canvas中
                    ctx.drawImage(image,0,0);
                    
                    //旋转角度递增
                    deg++;
                    deg=deg % 360;
                    //使用timer定时绘制下一幅图
                    setTimeout(move,1000/fps);
                }
                
            })();

            
        </script>
    </body>
</html>

首先将显示图标的imag元素的根对象作为参数传递给drawImage()方法，将图像粘贴到Canvas上。随后调用replaceChild()方法将imag元素替换为Canvas元素。此时img元素并没有从文档中消失，img元素的根对象可以用于绘制各帧，而且可无限次使用。最后，调用生成动画处理的函数move()。