canvas实现雷达线圈图效果
代码语言:html
所属分类:其他
代码描述:canvas实现雷达线圈图效果
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> body { margin: 0; background-color: #000; } </style> </head> <body translate="no"> <canvas id="canvas"></canvas> <script> const canvas = document.getElementById("canvas"); const ctx = canvas.getContext("2d"); let w = canvas.width = window.innerWidth; let h = canvas.height = window.innerHeight; let t = 0; let speed = 3; let interval; ctx.imageSmoothingQuality = "high"; class Starship { constructor() { this.first = 0; this.second = 1; this.divisors = [2, 3, 4, 5, 6, 8, 9, 10, 12, 15, 16, 20, 24, 30, 36]; this.divisor = this.divisors[random(0, this.divisors.length)]; this.seq = [this.first, this.second]; ctx.globalCompositeOperation = "hard-light"; ctx.shadowColor = ctx.strokeStyle = randomColor(0, 255, 0.6, 1); ctx.shadowBlur = 2; ctx.lineWidth = 0.1; this.draw = () => { if (t % speed === 0) { let radius = this.seq[0] + this.seq[1]; this.seq.push(radius); this.seq.shift(); .........完整代码请登录后点击上方下载按钮下载查看
网友评论0