1

嗨，我发现效果很好http://www.wandi-studio.com/Home/Welcome — 动画文本背景。（动画背景，标题为 HYT WATCHES、LE BATAFOR、MAURICE LACROIX）

本站使用mootools作为js框架，我想使用JQuery。

也许有人给我提示如何制作这种效果？

4

2 回答 2

2

您可以使用画布的 context.globalCompositeOperation 用图像覆盖文本。

然后你可以通过动画图像的x-offset来获得你想要的运动效果。

此代码将在画布上绘制文本，然后仅用图像覆盖文本。

// first draw the text on the canvas
      ctx.beginPath();
      ctx.font="144pt Verdana";
      ctx.fillText("See",30,200);
      ctx.fill();


      // use compositing to draw the background image
      // only where the text has been drawn
      ctx.beginPath();
      ctx.globalCompositeOperation="source-in";
      ctx.drawImage(img,-x,0);

当然，您需要使用自己的文本字体、背景图像和动画模式来进行风格化。

这是代码和小提琴：http: //jsfiddle.net/m1erickson/MrVJB/

<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>

<style>
    body{ padding:20px; }
    canvas{border:1px solid red; position:absolute}
</style>

<script>
$(function(){


    var canvas=document.getElementById("canvas");
    var ctx=canvas.getContext("2d");

    var xOffset=100; // image offset
    var fps=60;

    var img=document.createElement("img");
    img.onload=function(){
       animate();
    }
    img.src="http://images4.fanpop.com/image/photos/23400000/water-water-23444632-2048-1277.jpg";

    function draw(x){

            ctx.save();
            ctx.beginPath();

            // put text on canvas
            ctx.font="144pt Verdana";
            ctx.fillText("See",30,200);
            ctx.fill();
            ctx.beginPath();

            // use compositing to draw the background image
            // only where the text has been drawn
            ctx.globalCompositeOperation="source-in";
            ctx.drawImage(img,-x,0);
            ctx.restore();
    }


        function animate() {

            // change the background image offset
            xOffset+=3;
            if(xOffset>=img.width){xOffset=0;}

            // draw the text and background image
            draw(xOffset);

            // request another frame using fps intervals
            setTimeout(function() {
                requestAnimationFrame(animate);
                // Drawing code goes here
            }, 1000 / fps);
        }


}); // end $(function(){});
</script>

</head>

<body>
     <canvas id="canvas" width=400 height=300></canvas>
</body>
</html>
于 2013-06-19T22:22:07.980 回答
0

例如，我在这里看到了这个解决方案：

您需要创建字母透明的图像。使用位置，您还可以在该图像“下方”设置 jQuery 动画，其中对象（在本例中为另一个图像）向右移动并返回循环。

这应该可以帮助您开始。

于 2013-06-19T20:44:38.823 回答