zoukankan      html  css  js  c++  java
  • canvas 动画

    1.随机产生形状,做360度运转,带有一个开始开始按钮一个停止按钮

     var canvas=$('.mycanvas');
         canvas.attr("width",500);//$(window).get(0).innerWidth
        canvas.attr("height",500);//$(window).get(0).innerHeight
     var context=canvas.get(0).getContext('2d');
     var startbtn=$('#started'),stopbtn=$("#stoped"),palyAnimation = true;
         startbtn.hide();
        startbtn.click(function(){
            $(this).hide();
            stopbtn.show();
            palyAnimation = true;
            animate();
        })
        stopbtn.click(function(){
            $(this).hide();
            startbtn.show();
            palyAnimation = false;
        })
          var Shape = function(x,y,width,height){
            this.x = x;
            this.y = y;
            this.width = width;
            this.height = height;
            this.radius = Math.random()*30;
            this.angle = 0;
            }
        var shapes = new Array();
        for(var i= 0; i< 10; i++){
            var x = Math.random()*250,y = Math.random()*250,width = height =Math.random()*50;
            shapes.push(new Shape(x,y,width,height));
            }
        
        /*shapes.push(new Shape(50,50,10,10));
        shapes.push(new Shape(100,100,10,10));
        shapes.push(new Shape(150,150,10,10));*/
        function animate(){
            context.clearRect(0,0,500,500);
            var shapeslength = shapes.length;
            for(var i=0;i< shapeslength;i++){
                var tmpShape = shapes[i];
                    x = tmpShape.x+(tmpShape.radius*Math.cos(tmpShape.angle*(Math.PI/180)));
                    y = tmpShape.y+(tmpShape.radius*Math.sin(tmpShape.angle*(Math.PI/180)));
                    
                    tmpShape.angle += 5;
                    if(tmpShape.angle > 360){
                        tmpShape.angle = 0;
                        };
                    context.fillStyle ="rgb("+Math.floor(Math.random()*255)+","+Math.floor(Math.random()*255)+","+Math.floor(Math.random()*255)+")";//随机颜色
                    context.fillRect(x,y,tmpShape.width,tmpShape.height);
                };
                if(palyAnimation){ setTimeout(animate,33)};
            }
         animate();

    2.随机生成的形状,左右运动,遇边界反弹

    var startbtn=$('#started'),stopbtn=$("#stoped"),palyAnimation = true;
         startbtn.hide();
        startbtn.click(function(){
            $(this).hide();
            stopbtn.show();
            palyAnimation = true;
            animate();
        })
        stopbtn.click(function(){
            $(this).hide();
            startbtn.show();
            palyAnimation = false;
        })
          var Shape = function(x,y,width,height){
            this.x = x;
            this.y = y;
            this.width = width;
            this.height = height;
            this.radius = Math.random()*30;
            this.angle = 0;
            this.reverseX = false;
            this.reverseY = false;
            }
        var shapes = new Array();
        for(var i= 0; i< 10; i++){
            var x = Math.random()*250,y = Math.random()*250,width = height =Math.random()*50;
            shapes.push(new Shape(x,y,width,height));
            }
    
        function animate(){
            context.clearRect(0,0,500,500);
            var shapeslength = shapes.length;
            for(var i=0;i< shapeslength;i++){
                var tmpShape = shapes[i];
                    //x = tmpShape.x+(tmpShape.radius*Math.cos(tmpShape.angle*(Math.PI/180)));
                    //y = tmpShape.y+(tmpShape.radius*Math.sin(tmpShape.angle*(Math.PI/180)));
                    if(tmpShape.x < 0){
                        tmpShape.reverseX =false;
                        }else if(tmpShape.x + tmpShape.width > 500){
                        tmpShape.reverseX = true;    
                        }
                    if(tmpShape.y < 0){
                        tmpShape.reverseY =false;
                        }else if(tmpShape.y + tmpShape.height > 500){
                        tmpShape.reverseY = true;    
                        }
                    if(!tmpShape.reverseX){
                        tmpShape.x +=2;
                        } else{
                        tmpShape.x -=2;    
                        }
                    if(!tmpShape.reverseY){
                        tmpShape.y +=2;
                        } else{
                        tmpShape.y -=2;    
                        }
                            
                    context.fillRect(tmpShape.x,tmpShape.y,tmpShape.width,tmpShape.height);
                };
                if(palyAnimation){ setTimeout(animate,33)};
            }
         animate();
    本人无商业用途,仅仅是学习做个笔记,特别鸣谢小马哥,学习了IOS,另日语学习内容有需要文本和音频请关注公众号:riyuxuexishuji
  • 相关阅读:
    C语言初学者代码中的常见错误与瑕疵(22)
    ANSI C (83)和87 ANSI C 这两个标准存在么?
    常见的认证
    python入门(一)
    Altium Designer重装后图标都变白板或都变一样的解决方法
    转:关于S参数的一些理解
    射频与微波测量之S参数
    驻波比
    PCB特征阻抗计算
    函数的形参(非引用形参、指针形参、引用形参)
  • 原文地址:https://www.cnblogs.com/laugh/p/4536307.html
Copyright © 2011-2022 走看看