canvas正方形放大动画效果代码
代码语言:html
所属分类:动画
代码描述:canvas正方形放大动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<style>
body,html{
background: #000;
margin: 0;
height: 100vh;
overflow: hidden;
}
#c{
background:#000;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
</style>
</head>
<body >
<canvas id=c>
<script>
c = document.querySelector('#c');
x = c.getContext('2d');
S = Math.sin;
C = Math.cos;
Rn = Math.random;
t = go = 0;
rsz = window.onresize = () => {
setTimeout(() => {
if (document.body.clientWidth > document.body.clientHeight * 1.77777778) {
c.style.height = '100vh';
setTimeout(() => c.style.width = c.clientHeight * 1.77777778 + 'px', 0);
} else {
c.style.width = '100vw';
setTimeout(() => c.style.height = c.clientWidth / 1.77777778 + 'px', 0);
}
c.width = 1920;
c.height = c.width / 1.777777778;.........完整代码请登录后点击上方下载按钮下载查看
网友评论0