Javascript 如何使形状移动到鼠标位置并消失？

Plunker:

---

我所拥有的：

当鼠标移动时，圆在设定的半径上随机出现

---

我想要什么：

新出现的圆圈在变小时向鼠标移动，在变小时消失

可以把它想象成某种重力效应，或者说鼠标是一根集中能量的魔杖

---

问题：

如何在

画布上实现我想要的东西？
类似的东西？
（有关信息，请参见代码更改）


var canvas=document.getElementById（“canvas”）；
canvas.width=window.innerWidth；
canvas.height=window.innerHeight；
var context=canvas.getContext（“2d”）；
函数createImageOnCanvas（imageId）{
canvas.style.display=“块”；
document.getElementById（“圆圈”）.style.overflowY=“隐藏”；
var img=新图像（300300）；
img.src=document.getElementById（imageId）.src；
context.drawImage（img，（0）、（0））；//onload。。。。
}
var循环=[]；
var pos={x:0，y:0}；
功能图（e）{
clearRect（0,010001000）；
对于（var i=0；i类似的东西？
（有关信息，请参见代码更改）


var canvas=document.getElementById（“canvas”）；
canvas.width=window.innerWidth；
canvas.height=window.innerHeight；
var context=canvas.getContext（“2d”）；
函数createImageOnCanvas（imageId）{
canvas.style.display=“块”；
document.getElementById（“圆圈”）.style.overflowY=“隐藏”；
var img=新图像（300300）；
img.src=document.getElementById（imageId）.src；
context.drawImage（img，（0）、（0））；//onload。。。。
}
var循环=[]；
var pos={x:0，y:0}；
功能图（e）{
clearRect（0,010001000）；
对于（var i=0；i）您为什么将
draw（event）
更改为
onMouseMove（event）
？onMouseMove（e）的
在你的javascript中？我在代码中添加了一些注释。所有内容都在那里。你能把所有这些都放在一个plunker中吗？Upvote@Coder1000。你想要的代码在答案的代码片段中，当然，你可以把它放在plunker中——或者你需要的任何其他环境中。；=@markE我知道：D这只会让答案更简洁；）但是如果Bulent Vural不想把它放在plunker里，我会接受它的原样。你为什么把
draw（event）
改成
onMouseMove（event）
？onMouseMove（e）在哪里
在你的javascript中？我在代码中添加了更多的注释。所有内容都在那里。你能把所有这些都放在plunker中吗？Upvote@Coder1000。你想要的代码在答案的代码片段中，当然，你可以把它放在plunker中——或者你需要的任何其他环境中。；=@markE我知道：D这只会让答案更清晰；）但是如果Bulent Vural不想把它放进垃圾桶，我会接受它的原样。