Question

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

我是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>

Answer 1

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>

Answer 2

尝试用这个替换你的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);

    }

在动画结束时反转图像

2 个答案: