zoukankan      html  css  js  c++  java
  • canvas之----浮动小球

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>无标题文档</title>
    </head>
    <style>
    #canvas { border:solid 1px #ccc;}
    
    
    </style>
    <body>
    
    <div id="controls">
        <input id='animateButton' type="button" value="Animate"/>
    </div>
    <canvas id="canvas" width="750" height="500">Conot</canvas>
    
    
    <script>
    var canvas = document.getElementById("canvas"),context = canvas.getContext("2d"),paused =true ,
    
    discs = [
    {x:150,y:250,lastX:150,lastY:250,velocityX:-3.2,velocityY:1.5,radius:25,innerColor:"rgba(255,255,255,0.5)",middleColor:"rgba(255,255,255,0.7)",outerColor:"rgba(255,255,0,0.5)",strokeStyle:"gray",}
    ,{x:250,y:150,lastX:150,lastY:250,velocityX:-2.2,velocityY:3.5,radius:25,innerColor:"rgba(255,255,255,0.3)",middleColor:"rgba(255,255,255,0.7)",outerColor:"rgba(255,255,0,0.5)",strokeStyle:"gray",},
    {x:350,y:350,lastX:150,lastY:250,velocityX:-1.2,velocityY:3.5,radius:25,innerColor:"rgba(255,255,255,0.8)",middleColor:"rgba(255,255,255,0.3)",outerColor:"rgba(255,128,0,0.5)",strokeStyle:"gray",},
    ], numDiscs = discs.length,animateButton = document.getElementById("animateButton");
    
    
    function update(){
        var disc = null;
        for(var i=0;i<numDiscs;++i){
            disc = discs[i];
            if(disc.x + disc.velocityX + disc.radius> context.canvas.width || disc.x +disc.velocityX - disc.radius <0)
            disc.velocityX = -disc.velocityX ;
            
            if(disc.y +disc.velocityY +disc.radius > context.canvas.height || disc.y + disc.velocityY - disc.radius <0)
            disc.velocityY = -disc.velocityY;
            disc.x += disc.velocityX;
            disc.y += disc.velocityY;
            
            }
        
        }
    function draw(){
        var disc = 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,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 animate(time){
        
        if(!paused){
            context.clearRect(0,0,canvas.width,canvas.height);
            //drawBackground();
            update();
            draw();
            
            window.requestNextAnimationFrame(animate);
            }
    }
    
    animateButton.onclick =function (e){
        paused = paused?false :true ;
        if(paused){
            animateButton.value = "Animate";
        }
        else {
            window.requestNextAnimationFrame(animate);
            animateButton.value ="Pause";
            }
        }
    
    context.font = "48px Helvetica";
    
    window.requestNextAnimationFrame = (function(){
        var originalWebkitMethod, wrapper = undefined,callback = undefined,
        geckoVersion = 0 , userAgent = navigator.userAgent, index =0 , self =this;
        
        if(window.webkitRequestAnimationFrame){
            
            wrapper = function (time){
                
                if(time === undefined ){
                    
                    time = +new Date();
                    }
                    self.callback(time);
                };
            
            originalWebkitMethod = window.webkitRequestAnimationFrame;
            
            window.webkitRequestAnimationFrame = function (callback,element){
                self.callback = callback ;
                originalWebkitMethod(wrapper,element);
                
                }
            
            }
        if(window.mozRequestAnimationFrame){
            index = userAgent.indexOf("rv:");
            if(userAgent.indexOf("GecKo") != -1){
                geckoVersion = userAgent.substr(index +3 ,3);
                if(geckoVersion ==="2.0"){
                    window.mozRequestAnimationFrame = undefined ;
                    }
                
                }
            }
    return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame ||window.msRequestAnimationFrame || function (callback,element){
            var start,finish;
            window.setTimeout(function(){
                start = +new Date();
                callback(start);
                finish = +new Date();
                
                self.timeout = 1000/60 - (finish -start);
                
                
                },self.timeout);
            
            }
        
        })()
    
    
    </script>
    
    </body>
    </html>

    学习 canvas 核心技术 做的一个 效果。

  • 相关阅读:
    你知道require是什么吗?
    jQuery类库的设计
    多线程下载图片
    多线程与CPU和多线程与GIL
    一个python小爬虫
    一个方格表的问题
    使用django发布带图片的网页(上)
    uWSGI+Django+nginx(下)
    uWSGI+Django (中)
    Linux下安装Python3的django并配置mysql作为django默认数据库(转载)
  • 原文地址:https://www.cnblogs.com/xiaotian747/p/3799220.html
Copyright © 2011-2022 走看看