在javascript中设置动画形状

所以我试图在整个画布上创建形状动画，然后碰到边缘后再弹回，而我不清楚为什么其他两个形状没有像我的球那样有速度。我将发布下面的代码。在javascript中设置动画形状

<html> 

<body> 
    <section> 
    <div> 
     <canvas id="canvas" width="700" height="300"></canvas> 
    </div> 

    <script type="text/javascript"> 
    var canvas, 
     context, 
    x = Math.floor((Math.random() * 400) + 1),   //Ball x coordinate 
    y = Math.floor((Math.random() * 300) + 1),   //Ball y coordinate 
    dx = Math.floor((Math.random() * 10) + 1),    //X velocity 
    dy = Math.floor((Math.random() * 4) + 1),    //Y velocity 
    width = 700,  //Width of the background 
    height = 300;  //Height of the background 


function drawCircle(x,y,r) { //Draws the ball 
    context.beginPath(); 
    context.arc(x, y, r, 0, Math.PI*2, true); 
    context.fill(); 
} 


function drawRect(x,y,w,h) { //Draws the background 
    context.beginPath(); 
    context.rect(x,y,w,h); 
    context.closePath(); 
    context.fill(); 
} 

function start() { //Runs when the window loads. Stores canvas and context  in variables. Runs "draw" on an interval of 10ms 
    canvas = document.getElementById("canvas"); 
    context = canvas.getContext("2d"); 
    return setInterval(draw, 10); 
} 

function drawSquare(){ 
var canvas = document.getElementById('canvas'); 
    if (canvas.getContext){ 
    var ctx = canvas.getContext('2d'); 
    ctx.fillStyle = "white"; 
    ctx.beginPath(); 
    ctx.moveTo(200,50); 
    ctx.lineTo(250,50); 
    ctx.lineTo(300, 100); 
    ctx.lineTo(250,25); 
    ctx.fill(); 



} 

} 



function drawTri(){ 
var canvas = document.getElementById('canvas'); 
    if (canvas.getContext){ 
    var ctx = canvas.getContext('2d'); 

    ctx.beginPath(); 
    ctx.moveTo(75,50); 
    ctx.lineTo(100,75); 
    ctx.lineTo(75,25); 
    ctx.fill(); 
    } 

} 



function draw() { 
    context.clearRect(0, 0, width, height); //Clears the drawing space 
    context.fillStyle = "black";   //Sets fillstyle to black (for the  background) 
    drawRect(0,0, width, height);   //Draws the background 
    context.fillStyle = "white";   //Sets fillstyle to white (for the  ball) 
    drawCircle(x, y, 10); 
drawTri(); 
drawSquare(); //Calls function to draw the ball 
    if (x + dx > width || x + dx < 0)  //If the ball would leave the  width (right or left) on the next redraw... 
    dx = -dx;        //reverse the ball's velocity 
    if (y + dy > height || y + dy < 0)  //If the ball would leave the  height (top or bottom) on the next redraw... 
    dy = -dy;        //reverse the ball's velocity 
    x += dx;        //Increase ball x speed by  velocity 
    y += dy;        //Increase ball y speed by  velocity 
}   
window.onload = start;     //Run "start" function after the  window loads 
</script> 

    </section> 
</body> 
</html>

来源

2016-04-23 Phlash6

你忘了用变量做图。并且变量是相同的（因为在2个形状将总是在一起），因为如果x对于圆圈是150，则矩形将在它后面。所以，你需要更多的变量来跟踪它是这样的：circ1x，circ1y，circ2x，circ2y，rect1x，rect1y，rect2x，rect2y

来源

2016-04-23 23:28:59

你的球被使用可变坐标（x & Y）

context.arc(x, y, r, 0, Math.PI*2, true);

绘制

你的形状被使用硬编码，常数值得出：

ctx.moveTo(200,50); 
ctx.lineTo(250,50); 
ctx.lineTo(300, 100); 
ctx.lineTo(250,25);

ctx.moveTo(75,50); 
ctx.lineTo(100,75); 
ctx.lineTo(75,25);

要为它们设置动画，请使用变量绘制其他形状，然后更新这些变量。例如。

var x = 75, 
    y = 50; 
ctx.moveTo(x,y); 
ctx.lineTo(x + 25, y + 25); 
ctx.lineTo(x, y - 25);

来源

2016-04-23 23:37:52

在javascript中设置动画形状

回答

相关问题