动画结束时反转图像

Reverse image at end of animation

本文关键字：图像结束动画更新时间：2023-09-26

我正在尝试用箭头重新创建弹跳球效果。当箭头到达右墙时，它指向左边，然后返回，直到它到达左墙，然后再次指向右边。在一个连续的循环中。

我对JS和动画相当陌生。如有任何帮助，不胜感激。

到目前为止，我有箭头来回工作很好，但不反转/翻转时，撞到墙上。

谢谢。

 <!DOCTYPE html>
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head runat="server">
 <title></title>
 </head>
 <body>  
 <canvas id="canvas" width="500" height="400" style="border: solid;   border-color: black;"></canvas>      
<script type="text/javascript">
    window.onload = function () {
        var context;
        var dx = 1;
        var w3;
        var ctx;
        var img;
        function setCanvas() {
            var canvas = document.getElementById('canvas');
            if (canvas.getContext) {
                ctx = canvas.getContext('2d');
                img = new Image();
                img.onload = function (e) {                       
                    draw();
                }
                img.src = '/rightArrow2.png';
                w3 = img.width;
                draw();
            }
        }
        var startPos = 200;
        var endPos = 100;
        var x = 100;
        var y = 10;
        function draw() {
            ctx.clearRect(0, 0, 500, 500);
            ctx.drawImage(img, x, y);
            x += dx;
            if (x < endPos || x > startPos) {
                ctx.clearRect(0, 0, 500, 500);
                var canvas = document.getElementById('canvas');
                ctx2 = canvas.getContext('2d');                   
                var img2 = new Image();
                img2.src = document.getElementById("canvas").toDataURL(); 
                 var w4 = img2.width;
                ctx2.save();
                ctx2.translate(-w4, 0);
                ctx2.scale(-1, 1);
                ctx2.drawImage(img2, x , y);
                ctx2.restore();                  
                dx = -dx;
            }
            setTimeout(draw, 15);
        }
        setCanvas();
    }
    </script>
 </body>
  </html>

var context;
var dx= 4;
var dy=4;
var y=150;
var x=10;
function draw(){
	context= myCanvas.getContext('2d');
	context.clearRect(0,0,300,300);
	context.beginPath();
	context.fillStyle="#0000ff";
	context.arc(x,y,20,0,Math.PI*2,true);
	context.closePath();
	context.fill();
	if( x<0 || x>300)
	dx=-dx;
	if( y<0 || y>300)
		dy=-dy;
		x+=dx;
		y+=dy;
	}
setInterval(draw,10);

<!--
body { background-color:#ededed; font:normal 12px/18px Arial, Helvetica, sans-serif; }
#container { width:600px; margin:0 auto; }
#myCanvas { background:#fff; border:1px solid #cbcbcb; }
#nav { display:block; width:100%; text-align:center; }
#nav li { display:block; font-weight:bold; line-height:21px; text-shadow:1px 1px 1px #fff; width:100px; height:21px; padding:5px; margin:0 10px; background:#e0e0e0; border:1px solid #ccc; -moz-border-radius:4px;-webkit-border-radius:4px; border-radius:4px; float:left; }
#nav li a { color:#000; display:block; text-decoration:none; width:100%; height:100%; }
-->

<div id="container">
	
	<canvas id="myCanvas" width="300" height="300"></canvas>
<ul id="nav">
<li><a href="http://sixrevisions.com/html/bouncing-a-ball-around-with-html5-and-javascript/">View Tutorial</a></li>
<li><a href="http://sixrevisions.com/html/bouncing-a-ball-around-with-html5-and-javascript/#comments">Post Comment</a></li>
</ul>
</div>

试着用下面的代码替换你的draw()函数:

     function draw() {
        ctx.clearRect(0, 0, 500, 500);
        if (dx > 0) {
            ctx.drawImage(img, x, y);
        }
        else {
            ctx.save();
            ctx.translate(x + img.width, y);
            ctx.scale(-1, 1);
            ctx.drawImage(img, 0, 0);
            ctx.restore();
        }
        x += dx;
        if (x < endPos || x > startPos) {
            dx = -dx;
        }
        setTimeout(draw, 15);
    }