资讯专栏INFORMATION COLUMN

canvas 简易时钟

高胜山 / 2790人阅读

摘要:简易版时钟时钟清除画布,每次执行重新绘图,解决时钟模糊,边框有锯齿。

canvas 简易版时钟



 
  
  
  
  
  
  时钟
  
 
 
    
    
    

    
 

canvas烟花粒子
window.requestAnimFrame=(function(){
    return window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||function(callback){
        window.setTimeout(callback,1000/60);
    };
})();

    var can=document.getElementById("canvas");
    // can.width=document.body.clientWidth ;
    // can.height=document.body.clientHeight;
    var cw=window.innerWidth;
    var ch=window.innerHeight;
    can.width=cw ;
    can.height=ch;
    var cxt=can.getContext("2d");

    var circles=[];        //存放圆形粒子池
    var rects=[];        //存放正方形粒子池
    var triangles=[];    //存放三角形粒子池
    var i=0;
    var count=100;
    var x;                //鼠标的位置
    var y;

    /**
     * 圆形粒子对象
     * @param {[type]} x [description] 中心点
     * @param {[type]} y [description] 中心点
     * @param {[type]} r [description] 半径
     */
    function Circle(x,y,r){
        this.x=x;
        this.y=y;
        this.r=r;
        this.speed=Math.random()*0.5+1;    //速度
        this.direction=Math.random()*Math.PI*2;    //方向
    }
    /**
     * 更新圆心坐标
     * @return {[type]} [description]
     */
    Circle.prototype.update=function(){
        this.x+=Math.cos(this.direction)*this.speed;
        this.y+=Math.sin(this.direction)*this.speed;
        if(this.x=(cw-this.r)){
            this.x=cw-this.r;
            this.direction=Math.PI-this.direction;
        }
        if(this.y=(ch-this.r)){
            this.y=ch-this.r;
            this.direction=-this.direction;
        }
    };

    /**
     * 绘制圆形粒子
     * @return {[type]} [description]
     */
    Circle.prototype.draw=function(){
        cxt.beginPath();
        cxt.arc(this.x,this.y,this.r,0,360,false);
        cxt.closePath();
        cxt.fillStyle="#f66";
        if(this.x>x-50&&this.xy-50&&this.y
    /**
     * 矩形粒子对象
     * @param {[type]} x 起点位置
     * @param {[type]} y 起点位置
     * @param {[type]} w 矩形宽
     * @param {[type]} h 矩形长
     */
    function Rect(x,y,w,h){
        this.x=x;
        this.y=y;
        this.w=w;
        this.h=h;
        this.x0=Math.random()*cw;    //正方形的中心坐标    为了旋转而设定
        this.y0=Math.random()*ch;    //正方形的中心坐标
        this.r=Math.sqrt(Math.pow(this.w/2,2)+Math.pow(this.h/2,2));
        this.speed=Math.random()*0.5+1;    //速度
        this.direction=Math.random()*Math.PI*2;    //方向
    }
    /**
     * 更新粒子坐标
     * @return {[type]} [description]
     */
    Rect.prototype.update=function(){
        this.x0+=Math.cos(this.direction)*this.speed;
        this.y0+=Math.sin(this.direction)*this.speed;
        if(this.x0cw-this.r){
            this.x0=cw-this.r;
            this.direction=Math.PI-this.direction;
        }
        if(this.y0ch-this.r){
            this.y0=ch-this.r;
            this.direction=-this.direction;
        }

    };
    /**
     * 绘制正方形粒子
     * @return {[type]} [description]
     */
    Rect.prototype.draw=function(){
        cxt.save();
        cxt.fillStyle="#06c";
        cxt.translate(this.x0,this.y0);        //将坐标原点移至圆心  方便旋转
        cxt.rotate(i*Math.PI/180);
        cxt.beginPath();
        if(this.x0>x-50&&this.x0y-50&&this.y0
    /**
     * 等边三角形粒子 
     * @param  {[type]} h 三角形高
     * @return {[type]}   [description]
     */
    function Triangle(b){
        this.b=b;
        this.x0=Math.random()*cw;
        this.y0=Math.random()*ch;
        this.speed=Math.random()*0.5+1;
        this.direction=Math.random()*Math.PI*2;
        this.r=this.b/2*Math.tan(30*Math.PI/180);
        console.log(this.r+"   "+this.b);
    }
    /**
     * 中心更新
     * @return {[type]} [description]
     */
    Triangle.prototype.update=function(){
        this.x0+=Math.cos(this.direction)*this.speed;
        this.y0+=Math.sin(this.direction)*this.speed;
        if(this.x0cw-this.r){
            this.x0=cw-this.r;
            this.direction=Math.PI-this.direction;
        }
        if(this.y0ch-this.r){
            this.y0=ch-this.r;
            this.direction=-this.direction;
        }
    };

    Triangle.prototype.draw=function(){
        cxt.save();
        cxt.fillStyle="#86c";
        cxt.translate(this.x0,this.y0);
        cxt.rotate(i*Math.PI/180);
        cxt.beginPath();
        cxt.moveTo(-this.b/2,-this.r);
        cxt.lineTo(0,Math.sin(60*Math.PI/180)*this.b-this.r);
        cxt.lineTo(this.b/2,-this.r);
        
        
        cxt.closePath();
        if(this.x0>=x-50&&this.x0<=x+50&&this.y0>=y-50&&this.y0<=y+50){
            cxt.globalAlpha=1;
        }else{
            cxt.globalAlpha=0.2;
        }
        cxt.fill();
        cxt.restore();

    };
    while(count--){
        var w=Math.random()*cw;
        var h=Math.random()*ch;
        circles.push(new Circle(w,h,5));
        rects.push(new Rect(-5,5,10,10));
        triangles.push(new Triangle(10));
    }

    canvas.onmousemove=function(ev){
        var ev=ev||window.event;
        x=ev.pageX;
        y=ev.pageY;
        console.log(x+"..."+y);
    };
    /**
     * 在画布中绘制圆形粒子
     * @return {[type]} [description]
     */
    function loop(){
        requestAnimFrame(loop);
        i++;
        if(i>10000){
            i=0;
        }
        cxt.globalCompositeOperation="destination-out";
        cxt.fillStyle="rgba(0,0,0,1)";
        //透明度
        cxt.globalAlpha=1;
        cxt.fillRect(0,0,cw,ch);
        //显示重叠的部分
        cxt.globalCompositeOperation="lighter";
        var n=circles.length;
        while(n--){
            circles[n].draw();
            circles[n].update();
        }
        var n=rects.length;
        while(n--){
            rects[n].draw();
            rects[n].update();
        }

        var n=triangles.length;
        while(n--){
            triangles[n].draw();
            triangles[n].update();
        }
    }
    window.onload=loop;    

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/80588.html

相关文章

  • canvas 简易时钟

    摘要:简易版时钟时钟清除画布,每次执行重新绘图,解决时钟模糊,边框有锯齿。 canvas 简易版时钟 showImg(https://segmentfault.com/img/bVDNx7?w=405&h=370); 时钟 *{ margin:0; padding:0; } bod...

    sugarmo 评论0 收藏0
  • canvas应用一:简易时钟

    摘要:时钟的实现主要是应用上下文的简单变换文本添加及周期性调用方法。在绘制表盘及时针过程注意使用及方法添加用以保存或返回上一个画布设置属性。思路编写两个构造函数,分别代表表盘和时针,最后利用函数加以实现。 写在之前 canvas 元素中提供了看似简单的绘图方法,但仔细挖掘,可以以此做出非常复杂而漂亮的图形。随着 API 的逐渐完善,我相信自己能进行更多有意思的尝试。 时钟的 canvas ...

    whinc 评论0 收藏0
  • canvas应用一:简易时钟

    摘要:时钟的实现主要是应用上下文的简单变换文本添加及周期性调用方法。在绘制表盘及时针过程注意使用及方法添加用以保存或返回上一个画布设置属性。思路编写两个构造函数,分别代表表盘和时针,最后利用函数加以实现。 写在之前 canvas 元素中提供了看似简单的绘图方法,但仔细挖掘,可以以此做出非常复杂而漂亮的图形。随着 API 的逐渐完善,我相信自己能进行更多有意思的尝试。 时钟的 canvas ...

    MobService 评论0 收藏0
  • 简易时钟动画

    摘要:创建一个的对象并且用三个变量分别表示小时分钟秒并存放到一个函数中。 这就是我说的简易的表盘,有点简陋了 QaQshowImg(https://segmentfault.com/img/bVR4AT?w=368&h=332); 刚学习的时钟动画,觉得还有很多东西要去学习,有时候发现代码真是很神奇的。首先呢 我们需要有一个圆的轮廓,这个就是定义一个div宽和高相同,然后用到了一个css3的...

    cangck_X 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<