5.4.2_利用图块复制技术来处理动画背景

来源：互联网发布：机械设计学什么软件编辑：程序博客网时间：2024/05/18 00:56
5.4.2_利用图块复制技术来处理动画背景

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title>利用图块复制技术来处理动画背景</title>        <style>            body{                background: #ddd;            }            #canvas{                background: #fff;                cursor: pointer;                margin-left: 10px;                margin-top: 10px;                -webkit-box-shadow: 3px 3px 6px rgba(0,0,0,0.5);                -moz-box-shadow: 3px 3px 6px rgba(0,0,0,0.5);                box-shadow: 3px 3px 6px rgba(0,0,0,0.5);            }            #controls{                margin-top: 10px;                margin-left: 15px;            }        </style>    </head>    <body>        <div id="controls">            <input id="animateButton" type="button" value="Animate" />        </div>        <canvas id="canvas" width="750" height="500"></canvas>    </body>    <script>        var canvas = document.getElementById('canvas');        var context = canvas.getContext('2d');        //离屏canvas        var offscreenCanvas = document.createElement('canvas');        var offscreenContext = offscreenCanvas.getContext('2d');        var paused = true;         var discs = [ //三个圆的各种属性            {                x:150,                y:250,                lastX:150,                lastY:250,                velocityX:-3.2,                velocityY:3.5,                radius:25,                innerColor:'rgba(255,255,0,1)',                middleColor:'rgba(100,145,230,0.7)',                outerColor:'rgba(100,145,230,0.5)',                strokeStyle:'gray'            },            {                x:50,                y:150,                lastX:50,                lastY:150,                velocityX:2.2,                velocityY:2.5,                radius:25,                innerColor:'rgba(100,145,230,1)',                middleColor:'rgba(100,145,230,0.7)',                outerColor:'rgba(100,145,230,0.5)',                strokeStyle:'blue'            },            {                x:150,                y:75,                lastX:150,                lastY:75,                velocityX:1.2,                velocityY:1.5,                radius:25,                innerColor:'rgba(255,0,0,1)',                middleColor:'rgba(255,0,0,0.7)',                outerColor:'rgba(255,0,0,0.5)',                strokeStyle:'orange'            },        ];        var numDiscs = discs.length;        var animateButton = document.getElementById('animateButton');        var lastTime = 0;        var lastFpsUpdate = 0;        var lastFpsUpdateTime = 0;        var now;        //初始化        context.font = '48px Helvetica';        offscreenCanvas.width = canvas.width;        offscreenCanvas.height = canvas.height;        drawBackground(context);        drawBackground(offscreenContext);        //事件控制        animateButton.onclick = function(){            paused = paused? false:true;             if(paused){  //如果停止动画                animateButton.value = 'Animate';            }else{ //播放动画                window.requestAnimationFrame(animate);                animateButton.value = 'Pause';            }        }        //执行每次动画效果        function animate(time){            if(!paused){                update(); //更新此帧的三个圆的各种新属性                drawCircles();//开始绘制更新后的圆                //执行下一次animate                window.requestAnimationFrame(animate);            }        }        //更新        function update(){            var disc;            for(var i=0;i<numDiscs;i++){                disc = discs[i];                if(disc.x+disc.radius+disc.velocityX>context.canvas.width || disc.x-disc.radius+disc.velocityX<0){                    disc.velocityX = -disc.velocityX;                }                if(disc.y+disc.radius+disc.velocityY>context.canvas.height || disc.y-disc.radius+disc.velocityY<0){                    disc.velocityY = -disc.velocityY;                }                disc.lastX = disc.x;                disc.lastY = disc.y;                disc.x += disc.velocityX;                disc.y += disc.velocityY;            }        }        //绘制更新后的圆        function drawCircles(){            var disc;            var gradient;            for(var i=0;i<numDiscs;i++){                drawDiscBackground(discs[i]);            }            for(var i=0;i<numDiscs;i++){                disc = discs[i];                gradient = context.createRadialGradient(disc.x,disc.y,0,disc.x,disc.y,disc.radius);                gradient.addColorStop(0.3,disc.innerColor);                gradient.addColorStop(0.5,disc.middleColor);                gradient.addColorStop(1.0,disc.outerColor);                context.save();                context.beginPath();                context.arc(disc.x,disc.y,disc.radius,0,Math.PI*2,false);                context.fillStyle = gradient;                context.strokeStyle = disc.strokeStyle;                context.fill();                context.stroke();                context.restore();            }        }        //绘制上次背景        function drawDiscBackground(disc){            var x = disc.lastX;            var y = disc.lastY;            var r = disc.radius;            var w = (r+2)*2;            var h = (r+2)*2;            context.save();            context.beginPath();            context.arc(x,y,r+2,0,Math.PI*2,false);            context.clip();            eraseBackground();            context.drawImage(offscreenCanvas,x-(r+2),y-(r+2),w,h,x-(r+2),y-(r+2),w,h);            context.restore();        }        //擦除背景        function eraseBackground(){            context.clearRect(0,0,canvas.width,canvas.height);        }        //绘制横隔背景        function drawBackground(context){            context.save();            context.shadowColor = undefined;            context.shadowOffsetX = 0;            context.shadowOffsetY = 0;            context.shadowBlur = 0;            var step_y = 12;            var left_margin = step_y*4;            var top_margin = step_y*3;            var i = canvas.height;            context.strokeStyle = 'lightblue';            context.lineWidth = 1; //这里设置成0.5是会有问题            while(i>top_margin){                context.beginPath();                context.moveTo(0,i);                context.lineTo(canvas.width,i);                context.stroke();                i-=step_y;            }            context.restore();        }    </script></html>
阅读全文
0 0