Canvas基本匀速运动

最新推荐文章于 2022-05-07 10:26:04 发布

寓言s

最新推荐文章于 2022-05-07 10:26:04 发布

阅读量1.5k

点赞数 1

分类专栏： javascript canvas

本文链接：https://blog.csdn.net/u011551941/article/details/50409134

版权

javascript canvas 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

demo1 demo2

<!DOCTYPE html>
<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秒连起来就成了动画，应该说我们再电视上面看到的老期动画片都是这样实现的吧。