Question

我是HTML画布的新手，到目前为止，我使用它的唯一方法是使用p5.js框架。我有一个粒子系统，我希望粒子追逐我的光标。但是，虽然检查员没有抛出任何错误，但它们不会出现：

function getRandomArbitrary(min, max) {
  return Math.floor(Math.random() * (max - min)) + min;
}

var mouseX, mouseY;
var c=document.getElementById("myCanvas");
c.width = window.innerWidth;
c.height = window.innerHeight;
var ctx=c.getContext("2d");
var img=document.getElementById("stars");

function star(X, Y) {
    this.x = X;
    this.y = Y;
    this.size = getRandomArbitrary(3, 5);
}
star.prototype.draw = function() {
    ctx.fillStyle = "red";
    ctx.fill();
    ctx.beginPath();
    ctx.arc(this.x,this.y, this.size, 0, 2*Math.PI);
    ctx.stroke();
}
star.prototype.update = function() {
    // var mousePos = getMousePos(ctx, e);
    var xvel = this.x - mouseX;
    var yvel = this.y -  mouseY;
    Math.max(1, Math.min(xvel, 7));
    Math.max(1, Math.min(yvel, 7));
    this.x += xvel;
    this.y += yvel;
}
function starSystem(Num) {
    this.stars = [];
    for (var i = 0; i < Num; i++) {
        this.stars.push(new star(getRandomArbitrary(0, ctx.width), getRandomArbitrary(0, ctx.height)));
    }
}
starSystem.prototype.run = function() {
    for (var i = 0; i < this.stars.length; i++) {   
        this.stars[i].update();
        this.stars[i].draw();
    }
}

// ctx.drawImage(img,10,10);
var ss = new starSystem(50);
function iterate(e) {
    mouseX = e.clientX;
    mouseY = e.clientY;
    ss.run();
}

这是我的画布标签：

<canvas id="myCanvas" onmousemove="iterate(event)">
</canvas>

我不想以这种方式调用iterate函数（我宁愿使用setInterval）但这似乎是我能抓住事件变量e的最简单方法所以我可以计算鼠标位置。（参见我的iterate函数）我的主要问题是：为什么星球上的draw函数不能在画布上创建任何可见的结果？我知道我的代码可能非常混乱和非常规，但我想知道什么是让粒子在屏幕上绘制的最有效方法。非常感谢！

Html Canvas粒子系统

0 个答案: