MetroWind/cars.html

## cars.html
<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8" />
    <title>My test page</title>

    <script>
      function draw()
      {
          const canvas = document.getElementById("tutorial");
          if (canvas.getContext)
          {
              const ctx = canvas.getContext("2d");
              let r = 100;
              let overlap = 60;
              let t = r / 4;
              let y = r + t * 3;

              ctx.globalCompositeOperation = "screen";

              ctx.beginPath();
              ctx.arc(r*3 - overlap, y, r, 0, Math.PI * 2, true);
              ctx.fillStyle = "#2ed573";
              ctx.fill();


              ctx.beginPath();
              ctx.arc(r, y, r, 0, Math.PI * 2, true);
              ctx.fillStyle = "#ff4757";
              ctx.fill();

              ctx.beginPath();
              ctx.arc(r*5 - overlap * 2, y, r, 0, Math.PI * 2, true);
              ctx.fillStyle = "#1e90ff";
              ctx.fill();

              ctx.globalCompositeOperation = "source-over";
              ctx.fillStyle = "black";
              ctx.textAlign = "center";
              ctx.font = `bold ${t}px 'Source Han Serif'`;

              ctx.fillText("种类", r * 4, t);

              ctx.fillText("其他车", r*3 - overlap, y - t);

              ctx.fillText("排气管数", r - overlap/2, y - t);
              ctx.fillText(">2 的轿车", r - overlap/2, y);

              ctx.fillText("电车", r*5 - 2 * overlap, y - t);

              ctx.fillStyle = "rgb(0 0 0 / 0.5)";
              ctx.fillText("用途", r*4, 2.5 * t);

              ctx.fillText("买菜", r*3 - overlap, y + t * 1.5);
              ctx.fillText("听个响", r - overlap/2, y + t * 1.5);
              ctx.fillText("行走的手机", r*5 - 1.5 * overlap, y + t * 1.5);

              ctx.fillStyle = "black";
              ctx.font = `bold ${t*1.2}px 'Source Han Serif'`;
              ctx.fillText("家用车分类一览", r*3 - overlap, t*2);

              var img=new Image();
              img.src= canvas.toDataURL();
              ctx.fillStyle = "white";
              ctx.fillRect(0, 0, canvas.width, canvas.height);
              ctx.drawImage(img, 0, 0);

          }
      }
    </script>
  </head>
  <body onload="draw();">
    <canvas id="tutorial" width="500" height="300"></canvas>

  </body>
</html>
	<!DOCTYPE html>
	<html lang="zh-CN">
	<head>
	<meta charset="utf-8" />
	<title>My test page</title>

	<script>
	function draw()
	{
	const canvas = document.getElementById("tutorial");
	if (canvas.getContext)
	{
	const ctx = canvas.getContext("2d");
	let r = 100;
	let overlap = 60;
	let t = r / 4;
	let y = r + t * 3;

	ctx.globalCompositeOperation = "screen";

	ctx.beginPath();
	ctx.arc(r3 - overlap, y, r, 0, Math.PI 2, true);
	ctx.fillStyle = "#2ed573";
	ctx.fill();


	ctx.beginPath();
	ctx.arc(r, y, r, 0, Math.PI * 2, true);
	ctx.fillStyle = "#ff4757";
	ctx.fill();

	ctx.beginPath();
	ctx.arc(r5 - overlap 2, y, r, 0, Math.PI * 2, true);
	ctx.fillStyle = "#1e90ff";
	ctx.fill();

	ctx.globalCompositeOperation = "source-over";
	ctx.fillStyle = "black";
	ctx.textAlign = "center";
	ctx.font = `bold ${t}px 'Source Han Serif'`;

	ctx.fillText("种类", r * 4, t);

	ctx.fillText("其他车", r*3 - overlap, y - t);

	ctx.fillText("排气管数", r - overlap/2, y - t);
	ctx.fillText(">2 的轿车", r - overlap/2, y);

	ctx.fillText("电车", r5 - 2 overlap, y - t);

	ctx.fillStyle = "rgb(0 0 0 / 0.5)";
	ctx.fillText("用途", r4, 2.5 t);

	ctx.fillText("买菜", r3 - overlap, y + t 1.5);
	ctx.fillText("听个响", r - overlap/2, y + t * 1.5);
	ctx.fillText("行走的手机", r5 - 1.5 overlap, y + t * 1.5);

	ctx.fillStyle = "black";
	ctx.font = `bold ${t*1.2}px 'Source Han Serif'`;
	ctx.fillText("家用车分类一览", r3 - overlap, t2);

	var img=new Image();
	img.src= canvas.toDataURL();
	ctx.fillStyle = "white";
	ctx.fillRect(0, 0, canvas.width, canvas.height);
	ctx.drawImage(img, 0, 0);

	}
	}
	</script>
	</head>
	<body onload="draw();">
	<canvas id="tutorial" width="500" height="300"></canvas>

	</body>
	</html>