淘宝美工论坛

 找回密码
 立即注册

QQ登录

只需一步,快速开始

查看: 905|回复: 9
收起左侧

[美工相关] 【求助】破解破解

[复制链接]
  • TA的每日心情
    臭美
    2016-11-10 16:31
  • 签到天数: 85 天

    连续签到: 1 天

    [LV.6]渐入佳境

    15

    主题

    98

    帖子

    1万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    10730

    最佳新人

    发表于 2016-1-6 15:11:43 | 显示全部楼层 |阅读模式
    1. <div class="yanhua">
    2.   <canvas id="canvas" width="1920" height="456"></canvas>
    3.     <script>   
    4.       window.requestAnimFrame = ( function() {
    5.         return window.requestAnimationFrame ||
    6.             window.webkitRequestAnimationFrame ||
    7.             window.mozRequestAnimationFrame ||
    8.             function( callback ) {
    9.               window.setTimeout( callback, 1000 / 60 );
    10.             };
    11.       })();
    12.     var canvas = document.getElementById( 'canvas' ),
    13.         ctx = canvas.getContext( '2d' ),
    14.         cw = window.innerWidth,
    15.         ch = 456,
    16.         fireworks = [],
    17.         particles = [],
    18.         hue = 120,
    19.         limiterTotal = 6,
    20.         limiterTick = 0,
    21.         timerTotal = 60,
    22.         timerTick = 0,
    23.         mousedown = false,
    24.         mx,
    25.         my;
    26.     canvas.width = cw;
    27.     canvas.height = ch;
    28.     function random( min, max ) {
    29.       return Math.random() * ( max - min ) + min;
    30.     }
    31.     function calculateDistance( p1x, p1y, p2x, p2y ) {
    32.       var xDistance = p1x - p2x,
    33.           yDistance = p1y - p2y;
    34.       return Math.sqrt( Math.pow( xDistance, 2 ) + Math.pow( yDistance, 2 ) );
    35.     }
    36.     function Firework( sx, sy, tx, ty ) {
    37.       this.x = sx;
    38.       this.y = sy;
    39.       this.sx = sx;
    40.       this.sy = sy;
    41.       this.tx = tx;
    42.       this.ty = ty;
    43.       this.distanceToTarget = calculateDistance( sx, sy, tx, ty );
    44.       this.distanceTraveled = 0;
    45.       this.coordinates = [];
    46.       this.coordinateCount = 3;
    47.       while( this.coordinateCount-- ) {
    48.         this.coordinates.push( [ this.x, this.y ] );
    49.       }
    50.       this.angle = Math.atan2( ty - sy, tx - sx );
    51.       this.speed = 2;
    52.       this.acceleration = 1.05;
    53.       this.brightness = random( 50, 70 );
    54.       this.targetRadius = 1;
    55.     }

    56.     Firework.prototype.update = function( index ) {
    57.       this.coordinates.pop();
    58.       this.coordinates.unshift( [ this.x, this.y ] );
    59.       if( this.targetRadius < 8 ) {
    60.         this.targetRadius += 0.3;
    61.       } else {
    62.         this.targetRadius = 1;
    63.       }
    64.       
    65.       this.speed *= this.acceleration;
    66.       var vx = Math.cos( this.angle ) * this.speed,
    67.           vy = Math.sin( this.angle ) * this.speed;
    68.       this.distanceTraveled = calculateDistance( this.sx, this.sy, this.x + vx, this.y + vy );
    69.       if( this.distanceTraveled >= this.distanceToTarget ) {
    70.         createParticles( this.tx, this.ty );
    71.         fireworks.splice( index, 1 );
    72.       } else {
    73.         this.x += vx;
    74.         this.y += vy;
    75.       }
    76.     }

    77.     Firework.prototype.draw = function() {
    78.       ctx.beginPath();
    79.       ctx.moveTo( this.coordinates[ this.coordinates.length - 1][ 0 ], this.coordinates[ this.coordinates.length - 1][ 1 ] );
    80.       ctx.lineTo( this.x, this.y );
    81.       ctx.strokeStyle = 'hsl(' + hue + ', 100%, ' + this.brightness + '%)';
    82.       ctx.stroke();
    83.       ctx.beginPath();
    84.       ctx.arc( this.tx, this.ty, this.targetRadius, 0, Math.PI * 2 );
    85.       ctx.stroke();
    86.     }

    87.     function Particle( x, y ) {
    88.       this.x = x;
    89.       this.y = y;
    90.       this.coordinates = [];
    91.       this.coordinateCount = 5;
    92.       while( this.coordinateCount-- ) {
    93.         this.coordinates.push( [ this.x, this.y ] );
    94.       }
    95.       this.angle = random( 0, Math.PI * 2 );
    96.       this.speed = random( 1, 10 );
    97.       this.friction = 0.95;
    98.       this.gravity = 1;
    99.       this.hue = random( hue - 20, hue + 20 );
    100.       this.brightness = random( 50, 80 );
    101.       this.alpha = 1;
    102.       this.decay = random( 0.015, 0.03 );
    103.     }

    104.     Particle.prototype.update = function( index ) {
    105.       this.coordinates.pop();
    106.       this.coordinates.unshift( [ this.x, this.y ] );
    107.       this.speed *= this.friction;
    108.       this.x += Math.cos( this.angle ) * this.speed;
    109.       this.y += Math.sin( this.angle ) * this.speed + this.gravity;
    110.       this.alpha -= this.decay;
    111.       
    112.       if( this.alpha <= this.decay ) {
    113.         particles.splice( index, 1 );
    114.       }
    115.     }

    116.     Particle.prototype.draw = function() {
    117.       ctx. beginPath();
    118.       ctx.moveTo( this.coordinates[ this.coordinates.length - 1 ][ 0 ], this.coordinates[ this.coordinates.length - 1 ][ 1 ] );
    119.       ctx.lineTo( this.x, this.y );
    120.       ctx.strokeStyle = 'hsla(' + this.hue + ', 100%, ' + this.brightness + '%, ' + this.alpha + ')';
    121.       ctx.stroke();
    122.     }

    123.     function createParticles( x, y ) {
    124.       var particleCount = 300;
    125.       while( particleCount-- ) {
    126.         particles.push( new Particle( x, y ) );
    127.       }
    128.     }

    129.     function loop() {
    130.       requestAnimFrame( loop );
    131.       hue += 0.5;
    132.       ctx.globalCompositeOperation = 'destination-out';
    133.       ctx.fillStyle = 'rgba(0, 0, 0, 0.5)';
    134.       ctx.fillRect( 0, 0, cw, ch );
    135.       ctx.globalCompositeOperation = 'lighter';
    136.       var i = fireworks.length;
    137.       while( i-- ) {
    138.         fireworks[ i ].draw();
    139.         fireworks[ i ].update( i );
    140.       }
    141.       var i = particles.length;
    142.       while( i-- ) {
    143.         particles[ i ].draw();
    144.         particles[ i ].update( i );
    145.       }
    146.       
    147.       if( timerTick >= timerTotal ) {
    148.         if( !mousedown ) {
    149.           fireworks.push( new Firework( cw / 2, ch, random( 0, cw ), random( 0, ch / 2 ) ) );
    150.           timerTick = 0;
    151.         }
    152.       } else {
    153.         timerTick++;
    154.       }
    155.       
    156.       if( limiterTick >= limiterTotal ) {
    157.         if( mousedown ) {
    158.           fireworks.push( new Firework( cw / 2, ch, mx, my -74) );
    159.           limiterTick = 0;
    160.         }
    161.       } else {
    162.         limiterTick++;
    163.       }
    164.     }

    165.     canvas.addEventListener( 'mousemove', function( e ) {
    166.       mx = e.pageX - canvas.offsetLeft;
    167.       my = e.pageY - canvas.offsetTop;
    168.     });

    169.     canvas.addEventListener( 'mousedown', function( e ) {
    170.       e.preventDefault();
    171.       mousedown = true;
    172.     });

    173.     canvas.addEventListener( 'mouseup', function( e ) {
    174.       e.preventDefault();
    175.       mousedown = false;
    176.     });

    177.     $(document).ready(function(){
    178.                     loop();
    179.                 })
    180.     </script>
    181. </div>
    复制代码




    补充内容 (2016-1-6 16:32):
    哪个帅哥帮忙破解下呗

    《论坛帮助文档》有什么问题来这里看看吧,这里有你想知道的内容!


    淘宝美工论坛-汇聚淘宝美工高端人才,建设淘宝美工人才基地。请认准论坛唯一网址:www.taobaoux.com

  • TA的每日心情

    2016-9-21 14:06
  • 签到天数: 262 天

    连续签到: 1 天

    [LV.8]自成一派

    5

    主题

    193

    帖子

    5万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    51181

    天猫美工最佳新人热心会员

    QQ
    发表于 2016-1-6 15:35:51 | 显示全部楼层
    你想说的是什么
    愿余生有人鲜衣怒马,陪你看烈焰繁花。
  • TA的每日心情
    心跳
    2016-8-21 09:50
  • 签到天数: 5 天

    连续签到: 1 天

    [LV.2]登堂入室

    0

    主题

    78

    帖子

    2万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    21561

    QQ
    发表于 2016-1-6 16:03:51 | 显示全部楼层
    你想在淘宝放js代码
    我的小店https://shop130580970.taobao.com 【淘宝装修群: 5807586】
  • TA的每日心情
    思考
    2016-11-9 10:49
  • 签到天数: 364 天

    连续签到: 1 天

    [LV.8]自成一派

    13

    主题

    805

    帖子

    4万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    40457

    淘宝皇冠店美工

    QQ
    发表于 2016-1-6 16:13:07 | 显示全部楼层
    你想在淘宝放js代码?
    喜欢烘焙及养仓鼠的小渣渣
  • TA的每日心情
    心跳
    2016-3-29 00:05
  • 签到天数: 94 天

    连续签到: 12 天

    [LV.6]渐入佳境

    9

    主题

    200

    帖子

    1万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    13945

    发表于 2016-1-6 16:21:30 | 显示全部楼层

    《论坛帮助文档》有什么问题来这里看看吧,这里有你想知道的内容!


    淘宝美工论坛-汇聚淘宝美工高端人才,建设淘宝美工人才基地。请认准论坛唯一网址:www.taobaoux.com

  • TA的每日心情

    前天 19:08
  • 签到天数: 1165 天

    连续签到: 1 天

    [LV.10]功行圆满

    59

    主题

    6125

    帖子

    53万

    积分

    版主

    阅读权限: 100

    黄皮很酸吗? 糖糖很甜吗? 亲 我一下犯法吗?

    Rank: 12Rank: 12Rank: 12

    积分
    539106

    最佳新人热心会员宣传达人推广达人活跃会员优秀版主

    QQ
    发表于 2016-1-6 16:27:04 | 显示全部楼层
    向老马购买特殊服务模块4007
    >>>>>>挖掘淘宝Bug与代应用:364384606<<<<<<
  • TA的每日心情

    2016-10-5 11:26
  • 签到天数: 270 天

    连续签到: 1 天

    [LV.8]自成一派

    2

    主题

    173

    帖子

    4万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    43388

    发表于 2016-1-7 00:14:35 | 显示全部楼层
    楼上+1
    天晴
  • TA的每日心情
    抱抱
    2016-11-16 17:20
  • 签到天数: 281 天

    连续签到: 1 天

    [LV.8]自成一派

    32

    主题

    2817

    帖子

    4万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    45073

    最佳新人热心会员

    QQ
    发表于 2016-1-7 08:25:44 | 显示全部楼层
    代码永远都是我心中的那道伤疤!无法抹去!
    最好的我遇见最美的你,可是我们却隔了一整个青春!http://shop111472591.taobao.com
  • TA的每日心情
    大哭
    2016-4-27 03:59
  • 签到天数: 37 天

    连续签到: 1 天

    [LV.5]略有小成

    17

    主题

    82

    帖子

    2万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    22636

    发表于 2016-1-7 08:33:43 | 显示全部楼层
    你想在淘宝放JS

    《论坛帮助文档》有什么问题来这里看看吧,这里有你想知道的内容!


    淘宝美工论坛-汇聚淘宝美工高端人才,建设淘宝美工人才基地。请认准论坛唯一网址:www.taobaoux.com

    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

    小黑屋|Archiver|手机版|粤公网安备44060502000322号|淘宝美工论坛 ( 桂ICP备12007265号-8 )  

    GMT+8, 2016-12-3 06:19 , Processed in 0.133348 second(s), 21 queries , Gzip On, Memcache On.

    Powered by Discuz! X3.2

    © 2001-2013 Comsenz Inc.

    快速回复 返回顶部 返回列表