H5 canvas 动画❤

她让我换网名
她让我换网名 发布于 2017-02-09 13:42:04 浏览:2227 类型:原创 - 译文 分类:HTML/CSS - css3代码 二维码: 作者原创 版权保护
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>好困啊</title>
    <style type="text/css">
        body {
          margin: 0;
          padding: 0;
          background: white;
        }

        #myCanvas {
          display: block;
        }
    </style>
</head>
<body>
    <canvas width="400" height="300" id="myLove"></canvas>
</body>
<script type="text/javascript">
window.requestAnimFrame = (function () {
 return  window.requestAnimationFrame ||
  window.webkitRequestAnimationFrame ||
  window.mozRequestAnimationFrame ||
  window.oRequestAnimationFrame ||
  window.msRequestAnimationFrame ||
  function (callback) {
   window.setTimeout(callback, 1000 / 60);
  };
})();


/*
 * basic stuff
 */
var FX = {
    config : {
        background  : 'rgba(250,250,250,0.2)',
        color       : 'rgb(0,0,0)',//初始的颜色
        highlight   : 'rgb(0,0,0)'//鼠标经过de鼠标经过的yanse
    },
    dots : []
};

FX.canvas = document.getElementById('myLove');
FX.ctx = FX.canvas.getContext('2d');


/*
 * Extend Math Object
 */ 
Math.TO_RAD = Math.PI/180;

Math.getDistance = function( x1, y1, x2, y2 ) {
    
    var     xs = 0,
        ys = 0;
     
    xs = x1 - x2;
    ys = y1 - y2;       
    xs = xs * xs;
    ys = ys * ys;
     
    return Math.sqrt( xs + ys );
};

Math.getDegree = function( x1, y1, x2, y2 ) {
        
    var dx = x2 - x1,
        dy = y2 - y1;
    
    return Math.atan2(dy,dx) / Math.TO_RAD;
};



/*
 * Dot Object
 */
var Dot = function( opts ) {

    this.color = opts.color;

    this.x = 0;
    this.y = 0;
    this.dest_x = (opts.dest_x - 75);
    this.dest_y = (opts.dest_y - 75);
};

Dot.prototype.update = function() {

    var     d = this,
        dist_x = d.dest_x - d.x,
        dist_y = d.dest_y - d.y;

    d.x += dist_x * 0.05;
    d.y += dist_y * 0.05;

    FX.ctx.fillStyle = d.color;
    FX.ctx.fillRect( d.x-2, d.y-2, 4, 4 );
};



/*
 * full screen canvas
 */
FX.setFullscreen = function() {
    FX.width = FX.canvas.width = window.innerWidth;
    FX.height = FX.canvas.height = window.innerHeight;
};

/*
 * Mouse
 */
FX.handleMouseEvent = function(e, power) {

    var     radius = 75,
        k = FX.dots.length,
        i=0,
        mx, my, 
        dist, degree,
        d;

    if(e.offsetX) {
        mx = e.offsetX;
        my = e.offsetY;
    } else if(e.layerX) {
        mx = e.layerX;
        my = e.layerY;
    }

    mx -= FX.width/2;
    my -= FX.height/2;

    for( ;i<k;i=i+1 ) {

        d = FX.dots[i];

        dist = Math.getDistance( mx, my, d.x, d.y);     

        if( dist < radius ) {

            degree = Math.getDegree( d.x, d.y, mx, my );

            d.x += (Math.cos( degree * Math.TO_RAD ) * ((radius-dist) * power));
            d.y += (Math.sin( degree * Math.TO_RAD ) * ((radius-dist) * power));

            d.color = FX.config.highlight;

        } else {
            d.color = FX.config.color;
        }
    }
};

/*
 * create the heart
 */
FX.createHeart = function() {
    var     coords = [[1,4],[1,5],[1,6],[1,7],[1,8],[2,3],[2,4],[2,5],[2,6],[2,7],[2,8],[2,9],[3,2],[3,3],[3,4],[3,5],[3,6],[3,7],[3,8],[3,9],[3,10],[4,2],[4,3],[4,4],[4,5],[4,6],[4,7],[4,8],[4,9],[4,10],[4,11],[5,2],[5,3],[5,4],[5,5],[5,6],[5,7],[5,8],[5,9],[5,10],[5,11],[6,2],[6,3],[6,4],[6,5],[6,6],[6,7],[6,8],[6,9],[6,10],[6,11],[6,12],[7,3],[7,4],[7,5],[7,6],[7,7],[7,8],[7,9],[7,10],[7,11],[7,12],[8,3],[8,4],[8,5],[8,6],[8,7],[8,8],[8,9],[8,10],[8,11],[8,12],[8,13],[9,2],[9,3],[9,4],[9,5],[9,6],[9,7],[9,8],[9,9],[9,10],[9,11],[9,12],[10,2],[10,3],[10,4],[10,5],[10,6],[10,7],[10,8],[10,9],[10,10],[10,11],[11,2],[11,3],[11,4],[11,5],[11,6],[11,7],[11,8],[11,9],[11,10],[11,11],[12,2],[12,3],[12,4],[12,5],[12,6],[12,7],[12,8],[12,9],[12,10],[13,3],[13,4],[13,5],[13,6],[13,7],[13,8],[13,9],[14,4],[14,5],[14,6],[14,7],[14,8]],
        k = coords.length,
        raster = 10,
        i = 0;

    for( ;i<k;i=i+1 ) {
        FX.dots.push( new Dot({
            dest_x : coords[i][0] * raster,
            dest_y : coords[i][1] * raster,
            color: FX.config.color
        }) );
    }
};

/*
 * main loop
 */
FX.loop = function() {

    var     ctx = FX.ctx,
        k = FX.dots.length,
        i = 0;

    ctx.fillStyle = FX.config.background;
    ctx.fillRect(0,0, FX.width, FX.height );


    ctx.save();
    ctx.translate( FX.width/2, FX.height/2 );

    for( ;i<k;i=i+1 ) {
        FX.dots[i].update();
    }

    ctx.restore();
    
    requestAnimFrame( FX.loop );
};

/*
 * Event bindings
 */
window.addEventListener('resize', FX.setFullscreen );
FX.canvas.addEventListener('mousemove', function(e) { FX.handleMouseEvent(e, -0.1); } );
FX.canvas.addEventListener('mousedown', function(e) { FX.handleMouseEvent(e, 1); } );


/*
 * Init
 */
FX.setFullscreen();
FX.createHeart();
FX.loop();
</script>
</html>
z
给个赞 26 人点赞
收藏 44 人收藏
评论 已有 6 条评论;以下用户言论只代表其个人观点,不代表 前端网(QDFuns) 的观点或立场。
登录 以后才能发表评论
最新评论
瑶池
瑶池5 天前6F
我也好困emoticon
举报 支持 (0) 回复 (0)
125528458
1255284582017-02-10 15:17:225F
这个效果好看!!!
举报 支持 (0) 回复 (0)
lingwer111
lingwer1112017-02-10 13:52:184F
这是楼主写的还是网上的代码,转载最好写上出处,尊重版权
举报 支持 (0) 回复 (0)
她让我换网名
她让我换网名2017-02-10 13:48:593F
emoticon //@18792212799:好厉害
举报 支持 (0) 回复 (0)
951216388
9512163882017-02-10 08:19:352F
不错有很好的寓意
举报 支持 (0) 回复 (0)
18792212799
187922127992017-02-09 21:27:161F
好厉害
举报 支持 (0) 回复 (1)
她让我换网名 她让我换网名 作者

年前的时候,我想变成任何一个人,除了我自己

作者最新