Question

我有这个用于降雪效果的JavaScript代码。它的工作非常好，但我决定在网页文字上创造一场雪。我试过了，但没有尝试怎么做。

如何让雪落在“我爱你”的文字上？ http://jsfiddle.net/DgrxX/22/

我已经在VB6代码中看到雪落在文本上。如果七年前可以在Visual Basic 6中使用，为什么今天不能使用JavaScript或CSS3或jQuery？

function vp(woh)
{
    var viewportwidth;
    var viewportheight;

    if (typeof window.innerWidth != 'undefined')
    {
         viewportwidth = window.innerWidth,
         viewportheight = window.innerHeight
     }

     else if (typeof document.documentElement != 'undefined'
         && typeof document.documentElement.clientWidth !=
         'undefined' && document.documentElement.clientWidth != 0)
     {
         viewportwidth = document.documentElement.clientWidth,
         viewportheight = document.documentElement.clientHeight
     }

     else
     {
           viewportwidth = document.getElementsByTagName('body')[0].clientWidth,
           viewportheight = document.getElementsByTagName('body')[0].clientHeight
     }
        if (woh == 'w')
        {
            return viewportwidth;
        }
        else if (woh == 'h')
        {
            return viewportheight;
        }
        else
        {
            return false;
        }

    }
function snowflake()
{
    this.x = Math.random() * canvas.width;
    this.y = Math.random() * canvas.height;
    this.radius = Math.random()*2;
    this.color = "white";
    var tobefallingSpeed = Math.random() * 100;
    this.fallingSpeed = tobefallingSpeed + 30;
}
function render()
{
    ctx.clearRect(0,0,canvas.width, canvas.height);
    for (b=0;b<snowflakes;b++)
    {  
        sf[b].y+=0.4;
        if(sf[b].y> canvas.height){
         sf[b].y = 0;   
        }
        ctx.fillStyle = "#FFFFFF";
        ctx.fillRect(sf[b].x,sf[b].y,sf[b].radius,sf[b].radius);
    }
}
function main()
{
    now = Date.now();
    delta = now - then;
    render();
    then = now;
}
then = Date.now();
var int = self.setInterval(main,1);
var canvas = document.createElement("canvas");
var ctx = canvas.getContext("2d");
canvas.width = vp('w');
canvas.height = vp('h');
document.body.appendChild(canvas);

var numberofSnowflakes = 100;
var sf = [];

for (i=0;i<numberofSnowflakes;i++)
{
    sf[i] = new snowflake();
    snowflakes = i;
}

Answer 1

好的，所以我看到了一些答案，但提问者希望雪<完全堆积在文字上。确切的打桩（根据背景中的雪）真的很难，但我想建议一种（可能是复杂的）工作方法。

制作图片。

很多人。随着文字'我爱你'和每个雪的内容不同。这可能类似于从视频创建图片帧。

定义div。每x秒更改一次图片，其中x取决于您拍摄的图像数量。

您可以使用以下代码更改图片：

function change_background( new_image_source ) {

  var myimage = $( '#myimage' );

  myimage.attr( 'src', new_image_source );

  setTimeout( function () {

    change_background( 'new image source here' );

  }, 100);

}

此代码将在0.1之后更改图像。这有望为您提供所需的效果，但您需要制作许多略有不同的图片。我会为我的gf制作很多照片（如果我有的话）。

如何让雪落在网页文字上？

1 个答案: