51 lines
1.4 KiB
HTML
51 lines
1.4 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
|
|
<link rel="stylesheet" href="/css/style.css" />
|
|
<title>画圆</title>
|
|
<script src="/p5/p5.min.js"></script>
|
|
<script src="/p5/addons/p5.sound.min.js"></script>
|
|
<script src="/lib/utils.js"></script>
|
|
<script>
|
|
let o, d;
|
|
let circles = [];
|
|
|
|
function setup() {
|
|
createCanvas(600, 600);
|
|
background("#33DDFF");
|
|
drawGrid(0);
|
|
noFill();
|
|
noLoop();
|
|
}
|
|
|
|
function mousePressed() {
|
|
o = createVector(mouseX, mouseY);
|
|
}
|
|
|
|
function mouseDragged() {
|
|
let p = createVector(mouseX, mouseY);
|
|
d = p.sub(o).mag() * 2;
|
|
|
|
background("#33DDFF");
|
|
drawGrid(0);
|
|
circles.forEach((c) => {
|
|
circle(c.x, c.y, c.d);
|
|
});
|
|
circle(o.x, o.y, d);
|
|
}
|
|
|
|
function mouseReleased() {
|
|
let c = { x: o.x, y: o.y, d };
|
|
circles.push(c);
|
|
}
|
|
</script>
|
|
</head>
|
|
|
|
<body>
|
|
<main></main>
|
|
</body>
|
|
</html>
|