|
马上注册,结交更多好友,享用更多功能^_^
您需要 登录 才可以下载或查看,没有账号?立即注册
x
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
canvas {
border: 1px solid gray;
}
</style>
</head>
<body>
<canvas width="640" height="480"></canvas>
<br><button>gogogo</button>
<script>
let circles = [];
let id = null;
const cv = document.querySelector("canvas");
const gc = cv.getContext("2d");
gc.lineWidth = 5;
gc.strokeStyle = "blue";
const bt = document.querySelector("button");
bt.addEventListener("click", function () {
window.x = parseInt(Math.random() * 640);
window.y = parseInt(Math.random() * 480);
circles.push({locaX: x,locaY: y});
if (id == null) {
id = setInterval(draw1, 1);
}
});
function draw1() {
circles.forEach(function (e) {
gc.clearRect(e.locaX - 46, e.locaY - 46, 90, 90);
gc.beginPath();
gc.arc(e.locaX, e.locaY, 40, 0, 2 * Math.PI);
gc.stroke();
e.locaX += 1;
e.locaY += 1;
})
}
</script>
</body>
</html>
我做的是点击按钮出现圆然后往右下走 但是清除圆圈做的不行,那个清除圆圈只能是矩形,,然后圆圈多了重叠在一起就会出现没清理干净的情况,请问有什么好的解决方法吗 |
|