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

Question

我采用了 webbreakstuff 的 Canvas 落雪解决方案.

现在，我想让它看起来就像是从云中飘落的雪。

我有一个云图像，cloud.png。

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

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

现在，我想让它在两个 Canvas 之一(bgcanvas 或 fgcanvas)的前面绘制，但我不知道如何在符合context.drawImage。

有人可以帮我弄清楚该图像放在哪里以及如何放置吗？

谢谢。

Answer 1

所以，你有两个canvas元素，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。