使用canvas + JavaScript将云（图像）插入落雪的最简单方法

Question

我采用了webbreakstuff的Canvas降雪解决方案。

现在，我想让它看起来好像这场雪从云中掉出来了。

我有一张云图，cloud.png。

我想通过JavaScript创建它：

var cloud = new Image();
cloud.src = "cloud.png";

现在，我想让它在两个画布之一（bgcanvas或fgcanvas）之前绘制，但我无法弄清楚如何根据{{1}正确地做到这一点}}

有人可以帮我弄清楚这张图片放在哪里，怎么做？

感谢。

Answer 1

所以，你有两个画布元素，fgcanvas和bgcanvas，fgcanvas就在前面。

var cloud = new Image();
cloud.src = "cloud.png";
//I am assuming that both canvases are in the same position.
var ctx = fgcanvas.getContext('2d');
ctx.drawImage(cloud, sourceOfSnowX, sourceOfSnowY;

应该在雪的边缘画出cloud.png。