1

所以我最近一直在玩粒子系统。我打算尝试制作一些烟花，在学习如何制作“小径”的过程中，我被卡住了。据我了解，如果我的填充样式为 rgba(0,0,0,0.5);，则 globalcompositeoperation 的destination-out 应该在画布上放置一个黑色透明图像。然而，奇怪的是，当我这样做时，它会将画布涂成白色。我不知道为什么或我在这里做错了什么。这是一支笔

window.reqFrame = (function() {
  return window.webkitRequestAnimationFrame ||
    window.mozRequestAnimationFrame ||
    window.msRequestAnimationFrame ||
    window.oRequestAnimationFrame ||
    window.requestAnimationFrame ||
    function(callback) {
      window.setTimeout(callback, 1000 / 60);
    };
})();

var canvas, ctx;
var W = window.innerWidth;
var H = window.innerHeight;
particles = [];


function particle() {
  this.x = W / 2;
  this.y = H / 2;
  this.vx = -4;
  this.c = "#FF0000";
}

particle.prototype.draw = function() {
  ctx.moveTo(this.x, this.y);
  ctx.lineTo(this.x - 4, this.y);
  ctx.strokeStyle = "#FF0000";
  ctx.stroke()
}

particle.prototype.update = function() {
  this.x += this.vx;
}


function loop() {
  ctx.globalCompositeOperation = "destination-out";
  ctx.fillStyle = "rgba(0,0,0,0.5)";
  ctx.fillRect(0, 0, W, H);
  ctx.globalCompositeOperation = "source-over";
  particles[0].draw();
  particles[0].update();
  reqFrame(loop);
}

function paintRect(color, x, y, w, h) {
  ctx.fillStyle = color;
  ctx.fillRect(x, y, w, h);
}

function paintCanvas(color) {
  ctx.fillStyle = color;
  ctx.fillRect(0, 0, W, H);
}

function init() {
  canvas = document.getElementById('canvas');
  ctx = canvas.getContext('2d');
  canvas.width = W;
  canvas.height = H;
  particles.push(new particle());
  loop();

}

init();
body {
  overflow: hidden;
}
<canvas id="canvas"></canvas>

我正在做的事情。不过，这只是我在使用全球复合材料，所以.......是的。

4

0 回答 0