7.1.3_钟摆运动

来源：互联网发布：android性能优化典范编辑：程序博客网时间：2024/04/27 23:44
7.1.3_钟摆运动

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title>钟摆运动</title>        <style>            #canvas{                background: white;                box-shadow: 4px 4px 8px rgba(0,0,0,0.5);                -moz-box-shadow: 4px 4px 8px rgba(0,0,0,0.5);                -webkit-box-shadow: 4px 4px 8px rgba(0,0,0,0.5);                cursor: pointer;            }        </style>    </head>    <body>        <canvas id="canvas" width="800" height="600"></canvas>    </body>    <!-- 钟摆精灵对象 -->    <script>        var Sprite = function(name,painter,behaviors){            if(name !== undefined){ this.name = name; }            if(painter !== undefined){ this.painter = painter; }            this.x = 0; //支点中心x            this.y = 0; //支点中心y            this.pivotRadius = 7; //支点半径            this.weightX = 0; // 坠物小球的圆心点x            this.weightY = 0; // 坠物小球的圆心点y            this.weightRadius = 0; // 坠物小球的半径            this.rodLength = 100; //坠绳的长度            this.initialAngle = 0;            this.angle = 0;            this.visible = true;            this.animating = false;            this.behaviors = behaviors || [];        }        Sprite.prototype = {            paint:function(context){                if(this.painter !== undefined && this.visible){                    this.painter.paint(this,context);                }            },            update:function(context,time){                for(var i=0;i<this.behaviors.length;i++){                    this.behaviors[i].execute(this,context,time);                }            }        }    </script>    <script>        var canvas =document.getElementById('canvas');        var context = canvas.getContext('2d');        var elapsed = undefined;        var startTime = undefined;        //支点        var pivot_y = 20;        var pivot_x = canvas.width/2;        var pivot_radius = 7;        //线        var rod_length_in_pixels = 300;        //球        var weight_radius = 25;        var weight_x = canvas.width/2;        var weight_y = pivot_y+pivot_radius+rod_length_in_pixels+weight_radius;        var initial_angle = Math.PI/5;        var pendulumPainter = {            pivot_fill_style : 'rgba(0,0,0,0.2)',            weight_shadow_color : 'rgb(0,0,0,)',            pivot_shadow_color : 'rgb(255,255,0)',            stroke_color : 'rgb(100,100,195)',            paint:function(pendulum,context){                this.drawPivot(pendulum,context);                this.drawRod(pendulum,context);                this.drawWeight(pendulum,context);            },            drawWeight : function(pendulum,context){                context.save();                context.beginPath();                context.arc(pendulum.weightX,pendulum.weightY,pendulum.weightRadius,0,2*Math.PI,false);                context.clip();                context.shadowColor = this.weight_shadow_color;                context.shadowOffsetX = -4;                context.shadowOffsetY = -4;                context.shadowBlur = 8;                context.lineWidth = 2;                context.strokeStyle = this.stroke_color;                context.stroke();                context.beginPath();                context.arc(pendulum.weightX,pendulum.weightY,pendulum.weightRadius/2,0,2*Math.PI,false);                context.clip();                context.shadowColor = this.pivot_fill_style;                context.shadowOffsetX = -4;                context.shadowOffsetY = -4;                context.shadowBlur = 8;                context.stroke();                context.restore();            },            drawPivot : function(pendulum,context){                context.save();                context.beginPath();                context.shadowColor = undefined;                context.fillStyle = 'white';                context.arc(pendulum.x,pendulum.y,pendulum.pivotRadius/2,0,2*Math.PI,false);                context.fill();                context.stroke();                context.beginPath();                context.fillStyle = this.pivot_fill_style;                context.arc(pendulum.x,pendulum.y,pendulum.pivotRadius,0,2*Math.PI,false);                 context.fill();                 context.stroke();                context.restore();            },            drawRod : function(pendulum,context){                context.save();                context.beginPath();                context.moveTo(pendulum.x + pendulum.pivotRadius*Math.sin(pendulum.angle),                               pendulum.y + pendulum.pivotRadius*Math.cos(pendulum.angle)                              );                context.lineTo(pendulum.weightX - pendulum.weightRadius*Math.sin(pendulum.angle),                               pendulum.weightY - pendulum.weightRadius*Math.cos(pendulum.angle)                             );                context.stroke();                context.restore();            }        };    var swing = {        gravity_force : 32,        rod_length:0.8,        execute : function(pendulum,context,time){            pendulum.angle = pendulum.initialAngle*Math.cos(                                    Math.sqrt(this.gravity_force/this.rod_length)*elapsed                                );            pendulum.weightX = pendulum.x+Math.sin(pendulum.angle)*pendulum.rodLength;            pendulum.weightY = pendulum.y+Math.cos(pendulum.angle)*pendulum.rodLength;        }    };    var pendulum = new Sprite('pendulum',pendulumPainter,[swing]);    //初始化    pendulum.x = pivot_x;    pendulum.y = pivot_y;    pendulum.pivotRadius = pivot_radius;    pendulum.weightX = weight_x;    pendulum.weightY = weight_y;    pendulum.weightRadius = weight_radius;    pendulum.initialAngle = initial_angle;    pendulum.angle = initial_angle;    pendulum.rodLength = rod_length_in_pixels;    context.lineWidth = 0.5;    context.strokeStyle = 'rgba(0,0,0,0.5)';    context.shadowColor = 'rgba(0,0,0,0.5)';    context.shadowOffsetX = 2;    context.shadowOffsetY = 2;    context.shadowBlur = 4;    context.stroke();    startTime = +new Date();    animate();    function animate(time){        time = +new Date();        elapsed = (time - startTime)/1000;        context.clearRect(0,0,canvas.width,canvas.height);        pendulum.update(context,time);        pendulum.paint(context);        window.requestAnimationFrame(animate);    }    </script></html>
阅读全文
0 0