Skip to content

Instantly share code, notes, and snippets.

@MetroWind
Created June 16, 2023 00:27
Show Gist options
  • Save MetroWind/0f16d15fdd1aed3bbcab34fd3ef50870 to your computer and use it in GitHub Desktop.
Save MetroWind/0f16d15fdd1aed3bbcab34fd3ef50870 to your computer and use it in GitHub Desktop.
家用车分类一览
<!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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment