keenwon/radar.html

## radar.html
<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <title>Canvas · 雷达动画</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    canvas {
      margin: 100px auto;
      display: block;
      width: 400px;
      height: 400px;
    }
  </style>
</head>

<body>
  <canvas width="400" height="400"></canvas>
  <script>
    (function () {

      let width = 400;
      let height = 400;

      let util = {

        line: function (ctx, x1, y1, x2, y2, color, width) {
          ctx.beginPath();

          ctx.strokeStyle = color;
          ctx.lineWidth = width;

          ctx.moveTo(x1, y1);
          ctx.lineTo(x2, y2);

          ctx.stroke();
          ctx.closePath();
        },

        circle: function (ctx, x, y, r, color, width) {
          ctx.beginPath();

          ctx.strokeStyle = color || '#000';
          ctx.lineWidth = width || 1;

          ctx.arc(x, y, r, 0, 360);

          ctx.stroke();
          ctx.closePath();
        }
      }

      /**
       * 获取包含透明度的 Canvas
       */
      function getAlphaCanvas(imageData, alpha = 10) {
        for (let i = 3, j = imageData.data.length; i < j; i += 4) {
          imageData.data[i] = alpha;
        }

        let $canvas = document.createElement('canvas');
        $canvas.width = imageData.width;
        $canvas.height = imageData.height;
        let ctx = $canvas.getContext('2d');

        ctx.putImageData(backgroundImageData, 0, 0);

        return $canvas;
      }

      /**
       * 背景层
       */
      function background() {
        let $canvas = document.querySelector('canvas');
        let ctx = $canvas.getContext('2d');
        let radius = width / 8;

        /**
         * 填充背景
         */
        ctx.fillStyle = '#1C1C1C';
        ctx.fillRect(0, 0, width, height);

        /**
         * 绘制基本雷达图形
         */
        // 中央的十字
        util.line(ctx, 0, height / 2, width, height / 2, '#00CD66', 2);
        util.line(ctx, width / 2, 0, width / 2, height, '#00CD66', 2);

        // 圆心
        let circleX = width / 2;
        let circleY = height / 2;

        // 四个同心圆
        util.circle(ctx, circleX, circleY, radius, '#00CD66', 2);
        util.circle(ctx, circleX, circleY, radius * 2, '#00CD66', 2);
        util.circle(ctx, circleX, circleY, radius * 3, '#00CD66', 2);
        util.circle(ctx, circleX, circleY, radius * 4, '#00CD66', 2);

        ctx.stroke();
        ctx.closePath();

        return ctx.getImageData(0, 0, width, height);
      }

      /**
       * 前景层
       */
      function foreground($backgroundCanvas) {
        let $canvas = document.querySelector('canvas');
        let ctx = $canvas.getContext('2d');

        let backgroundPattern = ctx.createPattern($backgroundCanvas, 'no-repeat');

        ctx.strokeStyle = '#00FF00';
        ctx.lineWidth = 4;
        ctx.lineCap = 'round';

        let i = 0;
        let lineLength = height / 2;
        let angle;

        function draw() {
          // 旋转角度
          angle = (i % 360) * Math.PI / 180;

          ctx.fillStyle = backgroundPattern;
          ctx.fillRect(0, 0, width, height);

          ctx.save();

          ctx.beginPath();
          ctx.translate(width / 2, height / 2);
          ctx.rotate(angle);
          ctx.moveTo(0, 0);
          ctx.lineTo(0, -lineLength);
          ctx.stroke();
          ctx.closePath();

          ctx.restore();

          i++;

          requestAnimationFrame(draw);
        }

        draw();
      };

      let backgroundImageData = background();
      let $alphaCanvas = getAlphaCanvas(backgroundImageData, 10);

      foreground($alphaCanvas);
    })();
  </script>
</body>

</html>
	<!doctype html>
	<html>

	<head>
	<meta charset="utf-8">
	<title>Canvas · 雷达动画</title>
	<style>
	* {
	margin: 0;
	padding: 0;
	}

	canvas {
	margin: 100px auto;
	display: block;
	width: 400px;
	height: 400px;
	}
	</style>
	</head>

	<body>
	<canvas width="400" height="400"></canvas>
	<script>
	(function () {

	let width = 400;
	let height = 400;

	let util = {

	line: function (ctx, x1, y1, x2, y2, color, width) {
	ctx.beginPath();

	ctx.strokeStyle = color;
	ctx.lineWidth = width;

	ctx.moveTo(x1, y1);
	ctx.lineTo(x2, y2);

	ctx.stroke();
	ctx.closePath();
	},

	circle: function (ctx, x, y, r, color, width) {
	ctx.beginPath();

	ctx.strokeStyle = color \|\| '#000';
	ctx.lineWidth = width \|\| 1;

	ctx.arc(x, y, r, 0, 360);

	ctx.stroke();
	ctx.closePath();
	}
	}

	/**
	* 获取包含透明度的 Canvas
	*/
	function getAlphaCanvas(imageData, alpha = 10) {
	for (let i = 3, j = imageData.data.length; i < j; i += 4) {
	imageData.data[i] = alpha;
	}

	let $canvas = document.createElement('canvas');
	$canvas.width = imageData.width;
	$canvas.height = imageData.height;
	let ctx = $canvas.getContext('2d');

	ctx.putImageData(backgroundImageData, 0, 0);

	return $canvas;
	}

	/**
	* 背景层
	*/
	function background() {
	let $canvas = document.querySelector('canvas');
	let ctx = $canvas.getContext('2d');
	let radius = width / 8;

	/**
	* 填充背景
	*/
	ctx.fillStyle = '#1C1C1C';
	ctx.fillRect(0, 0, width, height);

	/**
	* 绘制基本雷达图形
	*/
	// 中央的十字
	util.line(ctx, 0, height / 2, width, height / 2, '#00CD66', 2);
	util.line(ctx, width / 2, 0, width / 2, height, '#00CD66', 2);

	// 圆心
	let circleX = width / 2;
	let circleY = height / 2;

	// 四个同心圆
	util.circle(ctx, circleX, circleY, radius, '#00CD66', 2);
	util.circle(ctx, circleX, circleY, radius * 2, '#00CD66', 2);
	util.circle(ctx, circleX, circleY, radius * 3, '#00CD66', 2);
	util.circle(ctx, circleX, circleY, radius * 4, '#00CD66', 2);

	ctx.stroke();
	ctx.closePath();

	return ctx.getImageData(0, 0, width, height);
	}

	/**
	* 前景层
	*/
	function foreground($backgroundCanvas) {
	let $canvas = document.querySelector('canvas');
	let ctx = $canvas.getContext('2d');

	let backgroundPattern = ctx.createPattern($backgroundCanvas, 'no-repeat');

	ctx.strokeStyle = '#00FF00';
	ctx.lineWidth = 4;
	ctx.lineCap = 'round';

	let i = 0;
	let lineLength = height / 2;
	let angle;

	function draw() {
	// 旋转角度
	angle = (i % 360) * Math.PI / 180;

	ctx.fillStyle = backgroundPattern;
	ctx.fillRect(0, 0, width, height);

	ctx.save();

	ctx.beginPath();
	ctx.translate(width / 2, height / 2);
	ctx.rotate(angle);
	ctx.moveTo(0, 0);
	ctx.lineTo(0, -lineLength);
	ctx.stroke();
	ctx.closePath();

	ctx.restore();

	i++;

	requestAnimationFrame(draw);
	}

	draw();
	};

	let backgroundImageData = background();
	let $alphaCanvas = getAlphaCanvas(backgroundImageData, 10);

	foreground($alphaCanvas);
	})();
	</script>
	</body>

	</html>