Canvas基本匀速运动

当前位置 : 首页 > 网页制作 > CSS > Canvas基本匀速运动

Canvas基本匀速运动

来源: 作者: 时间:2016-01-14 16:13
demo1 demo2 每次重新打开页面速度都会有差别 *{ margin:0;

demo1 demo2 每次重新打开页面速度都会有差别

    <!DOCTYPE >  
    <html lang="en">  
        <head>  
            <meta charset="utf-8">  
            <style>   
                *{  
                    margin:0;  
                    padding:0;  
                }  
            </style>  
        </head>  
        <body>  
            <canvas id="Mycanvas"></canvas>  
        </body>  
        <script>      
            !(function(doc){  
                    /**执行**/  
                    function runMove(elm){  
                        var cvs=doc.getElementById(elm),  
                        cont=cvs.getContext("2d"),  
                        w=window.innerWidth,  
                        h=window.innerHeight;  
                        cvs.width=w;  
                        cvs.height=h;  
                        /**  
                         * 对象赋予变量  
                         * @type {[type]}  
                         */  
                        var rectObj=initRect();  
                        var render=function(){  
                            cont.clearRect(0, 0, w, h);  
                            rectObj.render(cont);  
                        }  
                        /**  
                         * X坐标先清除画布再更新  
                         * @return {[type]} [description]  
                         */  
                        var update=function(){  
                            rectObj.update();  
                        }  
                        var renderAndUpdate=function(){  
                            render();  
                            update();  
                            requestAnimationFrame(renderAndUpdate);  
                        }  
                        renderAndUpdate();  
                    }  
                    /**获取画布里面的对象**/  
                    function initRect(){  
                        var options={  
                            width:200,  
                            height:100,  
                            x:0,  
                            y:0,  
                            bgColor:"#ff00ff",  
                            bw:10,  
                            boClolor:"black",  
                            startme:+new Date()  
                        }   
                        var draw=new drawRect(options);  
                        return draw;  
                    }  
                    /**  
                     * init 初始化坐标和画布数值  
                     * @param  {[type]} rectOption [description]  
                     * @return {[type]}            [description]  
                     */  
                    function drawRect(rectOption){  
                        this.rectOption=rectOption;  
                        this.x=rectOption.x;  
                        this.y=rectOption.y;  
                        this.w=rectOption.width;  
                        this.h=rectOption.height;  
                        this.bw=rectOption.bw;  
                        this.angle=Math.random()*(Math.PI*2);  
                        this.speedX=randomSpeed(0.05,2);  
      
                    }  
                    /**渲染  
                     * [prototype description]  
                     * @type {Object}  
                     */  
                    drawRect.prototype={  
                        render:function(context){  
                            context.beginPath();  
                            context.rect(this.x, this.y, this.w, this.h);  
                            context.fillStyle=this.bgColor;  
                            context.fill();  
                            context.lineWidth=this.bw;  
                            context.strokeStyle=this.boClolor;  
                            context.stroke();  
                        },  
                        update:function(){  
                            this.angle+=this.speedX;  
                            if(this.angle>2*Math.PI){  
                              this.angle-=2*Math.PI  
                            }  
                           console.log(this.x*Math.sin(this.angle));  
                            this.x+=10*Math.sin(this.angle);  
                        }  
                    }  
                    /**  
                     * *获取随机速度值  
                     * @param  {[type]} min [description]  
                     * @param  {[type]} max [description]  
                     * @return {[type]}     [description]  
                     */  
                    function randomSpeed(min,max){  
                        var random=Math.random()*(max-min)+min;  
                        return random;  
                    }  
                    runMove("Mycanvas");  
            })(document)  
        </script>  
    </html>  
Canvas运动的理解就是利用定时器requestAnimationFrame方法1秒60帧左右不停的擦除,重绘,在我们的肉眼里面是看不到它的过程的 1秒连起来 就成了动画,应该说我们再电视上面看到的老期动画片都是这样实现的吧。
Tag:

相关文章

网友评论

<