js实现canvas多彩正方体下落动画效果代码
代码语言:html
所属分类:动画
代码描述:js实现canvas多彩正方体下落动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> * { padding: 0; margin: 0; overflow: hidden; background: #FFF; } canvas { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); } </style> </head> <body> <script> var W, M, c, C, WW, WH, CW, CH, options, radian, num, colors, animationId; var getRandomNumber = function (min, max) { return Math.floor(Math.random() * (max - min + 1) + min); }; var makeCanvas = function () { document. getElementsByTagName("body")[0]. appendChild(document.createElement("canvas")); }; var initialize = function () { W = window; M = Math; c = document.getElementsByTagName("canvas")[0]; C = c.getContext("2d"); WW = c.width = 500; WH = c.height = 500; WD = M.sqrt(WW * WW + WH * WH); CW = WW / 2; CH = WH / 2; CD = WD / 2; num = 2; colors = ['#563672', '#8D3D77', '#C6427A', '#FD497F']; radian = Math.PI * 2 / 6; options = getOptions(); c.style.background = 'white'; }; var getOptions = function () { var arr = new Array(); var scale = 50; var yNum = Math.floor(WH / scale) + 3; var xNum = Math.floor(WW / scale) + 1; var gapY = M.cos(30 * M.PI / 180) * scale; var gapX = scale / 2; for (var y = 0; y < yNum; y++) { for (var x = 0; x < xNum; x++) { var ny = y * gapY; var nx = x * scale; var atan = M.atan2(ny, nx); var dx, dy, dist; /** [x, y, radius, dist, atan] */ if (y % 2 === 0) { dx = CW - nx; dy = CH - ny; dist = M.sqrt(dx * dx + dy * dy) / CD * 1.5; arr.push([nx, ny,.........完整代码请登录后点击上方下载按钮下载查看
网友评论0