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

这是你的成长圈子：
Here

但是我不想给您复制粘贴解决方案。因此，在我的帮助下，我相信您可以弄清楚。

首先，您需要更改事件侦听器，以便在html区域中的某个位置（如现在）按住鼠标时不会触发它。将其从$("html")设置为$("#your-canvas")。
由于您也不想一直看到您的圈子，并且它也不能处于静态位置，因此您还想更改.dot类的CSS属性。我相信display: none;和position: absolute;会做。
您要做的最后一件事是获取鼠标的确切位置（使用offset和所有内容）并将其设置为CSS属性top和left（不要忘记设置{ {1}}至display: none）。
景气，你有自己的成长圈子。

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

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

如何使圆变大取决于用户持有的时间（Java脚本）

1 个答案: