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';.........完整代码请登录后点击上方下载按钮下载查看
网友评论0