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