当前位置： 移动技术网 > IT编程>网页制作>Html5 > Canvas动画+canvas离屏技术

Canvas动画+canvas离屏技术

2020年03月12日  | 移动技术网IT编程  | 我要评论

法网游龙 巫师城,警方查获假冒水晶,爱的供养陶笛简谱

动画

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>canvas</title>
    <style>
        .canvas{border:1px solid #abcdef;background-color: #a9add2;}
    </style>
</head>
<body>
    <canvas class="canvas" id="canvas" width="600" height="400">您的浏览器不支持canvas</canvas>

    <script>
        var canvas=document.getelementbyid("canvas");
        var ctx=canvas.getcontext("2d");//上下文，绘图环境

        var posx=0,posy=0,dir=1;
        setinterval(function(){
            posx+=10*dir;
            ctx.clearrect(0,0,canvas.width,canvas.height);//清屏
            ctx.fillrect(posx,posy,50,50);

            //到达边界之后调整方向
            if(posx>=canvas.width-50){
                dir=-1;
            }else if(posx<=0){
                dir=1;
            }
        },100);
        

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

 

鼠标移入方块时，方块停止动画

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>canvas</title>
    <style>
        .canvas{border:1px solid #abcdef;background-color: #a9add2;}
    </style>
</head>
<body>
    <canvas class="canvas" id="canvas" width="600" height="400">您的浏览器不支持canvas</canvas>

    <script>
        var canvas=document.getelementbyid("canvas");
        var ctx=canvas.getcontext("2d");//上下文，绘图环境

        var posx=0,posy=0,dir=1,stop=false;

        //绑定鼠标事件
        canvas.onmousemove=function(e){
            var mousex=e.offsetx;
            var mousey=e.offsety;
            //鼠标点击到小方块内部
            if((mousex>posx && mousex<posx+50) && (mousey>posy && mousey<posy+50)){
                stop=true;//方块停下
            }else{
                stop=false;
            }
        }
        
        setinterval(function(){
            if(!stop){
                posx+=10*dir;
            }
            
            ctx.clearrect(0,0,canvas.width,canvas.height);//清屏
            ctx.fillrect(posx,posy,50,50);

            //到达边界之后调整方向
            if(posx>=canvas.width-50){
                dir=-1;
            }else if(posx<=0){
                dir=1;
            }
        },100);
        

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

 

绘制复杂背景

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>canvas</title>
    <style>
        .canvas{border:1px solid #abcdef;background-color: #a9add2;}
    </style>
</head>
<body>
    <canvas class="canvas" id="canvas" width="600" height="400">您的浏览器不支持canvas</canvas>

    <script>
        var canvas=document.getelementbyid("canvas");
        var ctx=canvas.getcontext("2d");//上下文，绘图环境

        var posx=0,posy=0,dir=1,stop=false;

        //绘制复杂背景
        var drawbg=function(){
            for(var i=0;i<canvas.width;i+=10){
                for(var j=0;j<canvas.height;j+=10){
                    ctx.beginpath();
                    ctx.arc(i,j,5,0,2*math.pi,true);
                    ctx.stroke();
                }
            }
        }
        drawbg();

        //绑定鼠标事件
        canvas.onmousemove=function(e){
            var mousex=e.offsetx;
            var mousey=e.offsety;
            //鼠标点击到小方块内部
            if((mousex>posx && mousex<posx+50) && (mousey>posy && mousey<posy+50)){
                stop=true;//方块停下
            }else{
                stop=false;
            }
        }

        setinterval(function(){
            if(!stop){
                posx+=10*dir;
            }
            
            ctx.clearrect(0,0,canvas.width,canvas.height);//清屏
            ctx.fillrect(posx,posy,50,50);

            //到达边界之后调整方向
            if(posx>=canvas.width-50){
                dir=-1;
            }else if(posx<=0){
                dir=1;
            }
        },100);
        

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

画面我截不出来，大概是闪太快了吧

大概效果就是网格状背景在刷新的一瞬间一闪而过

这是因为背景绘制完成之后，在下面方块动画前的清屏过程中被清空掉了

 

解决方案是：可以把绘制背景的函数在每次清屏之后都再次调用一遍

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>canvas</title>
    <style>
        .canvas{border:1px solid #abcdef;background-color: #a9add2;}
    </style>
</head>
<body>
    <canvas class="canvas" id="canvas" width="600" height="400">您的浏览器不支持canvas</canvas>

    <script>
        var canvas=document.getelementbyid("canvas");
        var ctx=canvas.getcontext("2d");//上下文，绘图环境

        var posx=0,posy=0,dir=1,stop=false;

        //绘制复杂背景
        var drawbg=function(){
            for(var i=0;i<canvas.width;i+=10){
                for(var j=0;j<canvas.height;j+=10){
                    ctx.beginpath();
                    ctx.arc(i,j,5,0,2*math.pi,true);
                    ctx.stroke();
                }
            }
        }
       

        //绑定鼠标事件
        canvas.onmousemove=function(e){
            var mousex=e.offsetx;
            var mousey=e.offsety;
            //鼠标点击到小方块内部
            if((mousex>posx && mousex<posx+50) && (mousey>posy && mousey<posy+50)){
                stop=true;//方块停下
            }else{
                stop=false;
            }
        }

        setinterval(function(){
            if(!stop){
                posx+=10*dir;
            }
            
            ctx.clearrect(0,0,canvas.width,canvas.height);//清屏
            drawbg();//绘制背景
            ctx.fillrect(posx,posy,50,50);

            //到达边界之后调整方向
            if(posx>=canvas.width-50){
                dir=-1;
            }else if(posx<=0){
                dir=1;
            }
        },100);
        

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

 

 

但是这种做法是非常损耗性能的

在移动端问题会非常明显，可能会造成动画明显的卡顿

 

更好的办法是使用离屏canvas技术来实现

思路就是新增一个canvas作为离屏canvas，将复杂背景绘制在上面

 

 然后每次清屏之后把离屏canvas的背景拷贝到动画canvas上

 

 当然别忘了给离屏的canvas设置为不可见

放出全部代码：

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>canvas</title>
    <style>
        .canvas{border:1px solid #abcdef;background-color: #a9add2;}
        #canvas2{display: none;}
    </style>
</head>
<body>
    <canvas class="canvas" id="canvas" width="600" height="400">您的浏览器不支持canvas</canvas>
    <canvas class="canvas" id="canvas2" width="600" height="400">您的浏览器不支持canvas</canvas>

    <script>
        var canvas=document.getelementbyid("canvas");
        var ctx=canvas.getcontext("2d");//上下文，绘图环境

        var canvas2=document.getelementbyid("canvas2");
        var ctx2=canvas2.getcontext("2d");//上下文，绘图环境

        var posx=0,posy=0,dir=1,stop=false;

        //在离屏canvas上绘制复杂背景
        var drawbg=function(){
            for(var i=0;i<canvas.width;i+=10){
                for(var j=0;j<canvas.height;j+=10){
                    ctx2.beginpath();
                    ctx2.arc(i,j,5,0,2*math.pi,true);
                    ctx2.stroke();
                }
            }
        }
        drawbg();//绘制背景
       

        //绑定鼠标事件
        canvas.onmousemove=function(e){
            var mousex=e.offsetx;
            var mousey=e.offsety;
            //鼠标点击到小方块内部
            if((mousex>posx && mousex<posx+50) && (mousey>posy && mousey<posy+50)){
                stop=true;//方块停下
            }else{
                stop=false;
            }
        }

        setinterval(function(){
            if(!stop){
                posx+=10*dir;
            }
            
            ctx.clearrect(0,0,canvas.width,canvas.height);//清屏
            
            //清屏之后把离屏canvas的背景拷贝过来
            ctx.drawimage(canvas2,0,0,canvas2.width,canvas2.height,0,0,canvas.width,canvas.height);

            ctx.fillrect(posx,posy,50,50);

            //到达边界之后调整方向
            if(posx>=canvas.width-50){
                dir=-1;
            }else if(posx<=0){
                dir=1;
            }
        },100);
        

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

 

您可能感兴趣的文章:

如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网