如何根据用户持有的时间长短使圆圈变大(Java 脚本)

Question

好的，这就是交易，我希望一个圆圈在画布上生长，具体取决于您按住鼠标按钮的时间长短。我能够让它在我点击鼠标的位置画一个固定宽度的圆圈，但我希望能够根据我握住的时间来确定大小。理想情况下，您将能够看到它在您持有时增长。

法典

var c = document.getElementById("canvas");
var ctx = c.getContext('2d');
document.addEventListener("mousedown", draw);
document.addEventListener("mousedown", time1);
document.addEventListener("mouseup", time2);
//Size
function time1(event) {
var a = new Date().getTime() + 1;
return a;
}
function time2(event) {
var b = new Date().getTime() + 4;
return b;
}
var c ="Time: " + (time2 - time1);
document.getElementById("time").innerHTML = c;
function draw(event, a , b) {
//Cords
var x = event.clientX;
var y = event.clientY;
//Fill
ctx.fillStyle = "#0c67f9";
//Draw
ctx.beginPath();
ctx.arc(x ,y ,(b - a),0,Math.PI * 2, true);
ctx.fill();
}    
function showCoords(event) {
var x = event.clientX;
var y = event.clientY;
var coords = "X coords: " + x + ", Y coords: " + y;
document.getElementById("demo").innerHTML = coords;
}
/*function grow(event) {
var z = event.time;
}*/

<canvas id="canvas" width="690" height="651" onclick="showCoords(event)" style ="border: 1px solid #e21313"></canvas>    
<p id="demo"></p>
<p id="time"></p>

Answer 1

这是你的摸索圈：
这里

但我不想给你复制和粘贴解决方案。 所以在我的帮助下，我相信你能弄清楚。

首先，您需要更改事件侦听器，以便在html区域中的某个位置按住鼠标时不会触发它(就像现在一样(。将其设置为$("html")到$("#your-canvas")。
由于您也不想一直看到您的圆圈，并且它不能具有静态位置，因此您还希望更改.dot类的 CSS 属性。
您要做的最后一件事是获取确切的鼠标位置(包含offset和所有内容(并将其设置为CSS属性top和left(不要忘记将display: none设置为display: block(。
position: absolute;display: none;嘭，你得到了你的成长圈。

但是我真的不明白你的意思：

但我希望能够根据我持有的时间来确定大小。