画布跟随光标

Question

我希望烟花跟随鼠标/光标移动，我已经很累了，但是找不到解决方法。

<canvas id="c"></canvas>
<script>
/* Starter js1k Template Code */
var b = document.body;
var c = document.getElementsByTagName('canvas')[0];
var a = c.getContext('2d');
document.body.clientWidth;

/* js1k Entry Code - Color Shift */
function p(){this.x=~~(Math.random()*(e-e/3-e/3+1))+e/3,this.y=~~(Math.random()*(h-h/3-h/3+1))+h/3,this.a=.1,this.c=this.d=1,this.b=(e+h)/7}var e=h=c.width=c.height=250,f=c.style,g=[],j=0;k=this.requestAnimationFrame||this.webkitRequestAnimationFrame||this.mozRequestAnimationFrame||this.oRequestAnimationFrame||this.msRequestAnimationFrame||function(a){setTimeout(a,1e3/60)},b.style.backgroundColor="#000",f.position="absolute",f.left=f.top="50%",f.marginLeft=f.marginTop="-125px",function q(){k(q,c),a.globalCompositeOperation="destination-out",a.fillStyle="rgba(0, 0, 0, .05)",a.fillRect(0,0,e,h),a.globalCompositeOperation="lighter";var b=g.length;for(0==j%2&&g.push(new p);b--;){var d=g[b],f=b,i=(d.b-d.a)/d.b;d.c=.5+d.d*i,d.a+=d.c,d.alpha=2.5*i,a.beginPath(),a.arc(d.x,d.y,d.a,0,2*Math.PI),a.fillStyle="hsla("+(~~(Math.random()*(j+100-(j-100)+1))+(j-100))+", 100%, 1%, "+d.alpha+")",a.fill(),d.a>d.b&&g.splice(f,1)}j++}();  
</script>

Answer 1

将其添加到代码中-它将与鼠标一起移动canvas元素本身。您可能需要调整其他CSS以避免滚动条（溢出：隐藏）：

window.onmousemove = function(e) {
  c.style.left = e.clientX + "px"
  c.style.top = e.clientY + "px";
};

/* Starter js1k Template Code */
var b = document.body;
var c = document.getElementsByTagName('canvas')[0];
var a = c.getContext('2d');

window.onmousemove = function(e) {
  c.style.left = e.clientX + "px"
  c.style.top = e.clientY + "px";
};

/* js1k Entry Code - Color Shift */
function p(){this.x=~~(Math.random()*(e-e/3-e/3+1))+e/3,this.y=~~(Math.random()*(h-h/3-h/3+1))+h/3,this.a=.1,this.c=this.d=1,this.b=(e+h)/7}var e=h=c.width=c.height=250,f=c.style,g=[],j=0;k=this.requestAnimationFrame||this.webkitRequestAnimationFrame||this.mozRequestAnimationFrame||this.oRequestAnimationFrame||this.msRequestAnimationFrame||function(a){setTimeout(a,1e3/60)},b.style.backgroundColor="#000",f.position="absolute",f.left=f.top="50%",f.marginLeft=f.marginTop="-125px",function q(){k(q,c),a.globalCompositeOperation="destination-out",a.fillStyle="rgba(0, 0, 0, .05)",a.fillRect(0,0,e,h),a.globalCompositeOperation="lighter";var b=g.length;for(0==j%2&&g.push(new p);b--;){var d=g[b],f=b,i=(d.b-d.a)/d.b;d.c=.5+d.d*i,d.a+=d.c,d.alpha=2.5*i,a.beginPath(),a.arc(d.x,d.y,d.a,0,2*Math.PI),a.fillStyle="hsla("+(~~(Math.random()*(j+100-(j-100)+1))+(j-100))+", 100%, 1%, "+d.alpha+")",a.fill(),d.a>d.b&&g.splice(f,1)}j++}();  

<canvas id="c"></canvas>