Question

所以我最近一直在玩粒子系统。我打算尝试制作一些烟花，并在学习如何制作一个＆＃34;线索＆＃34;我被困。据我所知，globalcompositeoperation的目标输出应该在画布上放置黑色透明图像，如果我的填充样式是rgba（0,0,0,0.5）;.然而，奇怪的是，当我这样做时，它将画布描绘成白色。我不知道为什么或我在这里做错了什么。这是pen

＆＃13;

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();

＆＃13;

body {
  overflow: hidden;
}

＆＃13;

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

＆＃13;

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

为什么我的目的地填充白色？

0 个答案: