canavs黄色方块线条运动背景动画效果代码
代码语言:html
所属分类:动画
代码描述:canavs黄色方块线条运动背景动画效果代码
代码标签: canavs 黄色 方块 线条 运动 背景 动画
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> html, body { height: 100%; overflow: hidden; } canvas { height: 100%; left: 0; position: fixed; top: 0; width: 100%; } </style> </head> <body> <canvas></canvas> <script > console.clear(); const canvas = document.querySelector("canvas"); const context = canvas.getContext("2d"); canvas.height = window.innerHeight * 2; canvas.width = window.innerWidth * 2; const deg = 13; const thetaA = Math.PI * (360 - deg) / 180.0; const thetaB = Math.PI * deg / 180.0; const cosA = Math.cos(thetaA); const sinA = Math.sin(thetaA); const cosB = Math.cos(thetaB); const sinB = Math.sin(thetaB); class Pane { constructor() { this.direction = Streak.generateDirection(); this.speed = Streak.generateSpeed(); this.radiusA = Streak.generateRadius(); this.radiusB = Streak.generateRadius(); this.y1 = Streak.generateY(); this.x1 = this.direction === 1 ? -canvas.width : canvas.width; this.cosA = this.direction === 1 ? cosA : cosB; this.sinA = this.direction === 1 ? sinA : sinB; this.cosB = this.direction === 1 ? cosB : cosA; this.sinB = this.direction === 1 ? sinB : sinA; } tick() { const cos = this.speed * this.cosA; const sin = this.speed * this.sinA; this.x1 = this.x1 + (this.direction * cos); this.y1 = this.y1 + (this.direction * sin); this.x2 = this.x1 + this.radiusA * this.cosA; this.y2 = this.y1 + this.radiusA * this.sinA; this.x3 = this.x1 + this.radiusB * this.cosB; this.y3 = this.y1 + this.radiusB * this.sinB; this.x4 = this.x2 + this.radiusB * this.cosB; this.y4 = this.y2 + this.radiusB * this.sinB; this.speed = Math.pow(this.speed, 1.0025); return this.isOffscreen(); } isOffscreen() { if (this.direction === 1) { return this.y3 < 0 || this.x1 > canvas.width; } else { return this.y2 < 0 || this.x4 < 0; } } static generateDirection() { return Math.random() > 0.5 ? 1 : -1; } static generateRadius() { const factor = canvas.width * 1; return Math.round(Math.random() * factor * 0.75 + factor * 0.25); } static generateSpeed() { return Math.round(Math.random() * 10 + 10); } static generateY() { return Math.round(Math.random() * canvas.height * 2); } } class Streak { constructor() { this.direction = Streak.generateDirection(); this.speed = Streak.generateSpeed(); this.radius = Streak.generateRadius(); this.y1 = Streak.generateY(); this.x1 = this.direction === 1 ? -this.radius : canvas.width; this.cos = this.direction === 1 ? cosA : cosB; this.sin = this.direction === 1 ? sinA : sinB; } tick() { const cos = this.speed * this.cos; const sin = this.speed * this.sin; th.........完整代码请登录后点击上方下载按钮下载查看
网友评论0