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

Question

我采用了来自webbreakstuff的 Canvas 落雪解决方案。

现在，我想让它看起来好像这雪是从云中掉下来的。

我有一张云图，cloud.png.

我想通过 JavaScript 创建它，如下所示：

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

现在，我想让它画在两个画布之一的前面（要么 要么bgcanvas）fgcanvas，但我不知道如何根据context.drawImage.

有人可以帮我弄清楚该图像的放置位置以及如何放置吗？

谢谢。

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。