HTML画布if/else

<!DOCTYPE html> 
    <html lang="en"> 
    <head> 
    <meta charset="utf-8"> 
    <style> 
    #map{border: 2px solid black} 
    </style> 

    <script> 
    window.onload = function(){ 

    var canvas = document.getElementById("map"), 
     c = canvas.getContext("2d"); 




    c.fillStyle = "white"; 
    c.fillRect(0, 0, canvas.width, canvas.height); 
    /*aisles*/ 
    c.fillStyle = "#009900"; 
    c.fillRect (20,90,20,250); 
    c.fillRect (70,90,20,250); 
    c.fillRect (120,90,20,250); 
    c.fillRect (170,90,20,250); 
    c.fillRect (220,90,20,250); 
    c.fillRect (270,90,20,250); 
    c.fillRect (470,90,20,250); 
    c.fillRect (520,90,20,250); 
    c.fillRect (570,90,20,250); 
    c.fillRect (620,90,20,250); 
    c.fillRect (670,90,20,250); 
    c.fillRect (720,90,20,250); 
    c.fillRect (770,90,20,250); 

    c.fillStyle = "#0066cc"; 
    c.fillRect (320,90,20,250); 
    c.fillRect (370,90,20,250); 
    c.fillRect (420,90,20,250); 

    /*sections*/ 
    c.fillStyle = "#009900"; 
    c.fillRect (700, 400,200,50); 
    c.fillRect (850,0,50,300); 
    c.fillRect (850, 365, 50, 85); 
    c.fillRect (175,0,555,50); 
    c.fillRect (0,0,150,50); 
    /*section names*/ 
    c.fillStyle = "white"; 
    c.font = "25px Arial"; 
    c.fillText("Dairy" ,45,30); 
    c.fillText("-----Meat------", 375, 30); 
    c.fillText("Produce",750, 435); 
    c.fillText("B", 865, 90); 
    c.fillText("a", 865, 115); 
    c.fillText("k", 865, 140); 
    c.fillText("e", 865, 165); 
    c.fillText("r", 865, 190); 
    c.fillText("y", 865,215); 
    /*aisle numbers*/ 
    c.fillStyle = "white"; 
    c.font = "12px Arial"; 
    c.fillText("16", 22, 210); 
    c.fillText("15", 72, 210); 
    c.fillText("14", 122, 210); 
    c.fillText("13", 172, 210); 
    c.fillText("12", 222, 210); 
    c.fillText("11", 272, 210); 
    c.fillText("10", 322, 210); 
    c.fillText("9", 376, 210); 
    c.fillText("8", 426, 210); 
    c.fillText("7", 476, 210); 
    c.fillText("6", 526, 210); 
    c.fillText("5", 576, 210); 
    c.fillText("4", 626, 210); 
    c.fillText("3", 676, 210); 
    c.fillText("2", 726, 210); 
    c.fillText("1", 776, 210); 


    c.beginPath(); 
    c.fillStyle = "#009900"; 
    c.arc(550,450,50,0,2,true); 
    c.fill(); 

    c.beginPath(); 
    c.fillStyle = "#009900"; 
    c.arc(200,450,50,0,2,true); 
    c.fill(); 

    /*animation sequence*/ 
    var posX = 550; 
    var posY = 450; 
     setInterval(function(){ 

     posX += 1; 

     if(posX >= 540){ 
      posY += -1; 
      } 

     c.fillStyle = "red"; 
     c.beginPath(); 
     c.arc(posX,posY, 5, 0, Math.PI*2, false); 
     c.fill(); 



    },30); 


}; 
</script> 
    <title>Canvas Map</title> 
</head> 

<body> 
    <canvas id="map" width="900" height="450"> 
     <img src="images/sad dinosaur.jpg" /> 
     You will need an updated browser to view this page! 
     (Chrome,Firefox, etc...) 
    </canvas> 
</body> 
</html>

我想制作一个动画，红色圆圈会在没有绘制在他们身上的过道（像迷宫）上下走动。我一直试图使用if/else语句来强制执行动画的方向。但是，当我尝试使用第二个if语句来更改圆形过程时，它会在该坐标点处开始我的圆形。HTML画布if/else

来源

2014-10-08 user3380392

你能发表一个问题的例子吗？目前我看到一个向左斜向移动的球。你试图做什么，当你做了什么？ – 2014-10-08 19:12:29

这是一种方式：

做线坐标的数组，你想沿着动画。
根据您希望您的圈子访问的行计算路点并将它们保存在数组中。
创建动画循环。
在循环内部，（1）清除画布，（2）绘制小岛，（3）在数组的下一个点绘制圆。

这里的示例代码和演示：

// canvas and context references 
 
var canvas = document.getElementById("map"); 
 
var c = canvas.getContext("2d"); 
 

 
// set some context styles 
 
c.fillStyle = "white"; 
 
c.fillRect(0, 0, canvas.width, canvas.height); 
 
c.fillStyle = 'red'; 
 

 
var startTime; 
 
var interval = 50; 
 

 
// define lines that go up/down the isles 
 
var lines = [] 
 
lines.push({ 
 
    x: 553, 
 
    y: 454 
 
}); 
 
lines.push({ 
 
    x: 672, 
 
    y: 378 
 
}); 
 
lines.push({ 
 
    x: 815, 
 
    y: 368 
 
}); 
 
lines.push({ 
 
    x: 812, 
 
    y: 70 
 
}); 
 
lines.push({ 
 
    x: 752, 
 
    y: 71 
 
}); 
 
lines.push({ 
 
    x: 761, 
 
    y: 365 
 
}); 
 
lines.push({ 
 
    x: 708, 
 
    y: 364 
 
}); 
 
lines.push({ 
 
    x: 703, 
 
    y: 76 
 
}); 
 
lines.push({ 
 
    x: 204, 
 
    y: 72 
 
}); 
 
lines.push({ 
 
    x: 200, 
 
    y: 454 
 
}); 
 

 
// calculate points at intervals along each line 
 
// put all the calculated points in a points[] array 
 
var points = []; 
 
var pointIndex = 0; 
 
for (var i = 1; i < lines.length; i++) { 
 
    var line0 = lines[i - 1]; 
 
    var line1 = lines[i]; 
 

 
    for (var j = 0; j < 100; j++) { 
 
    var dx = line1.x - line0.x; 
 
    var dy = line1.y - line0.y; 
 
    var x = line0.x + dx * j/100; 
 
    var y = line0.y + dy * j/100; 
 
    points.push({ 
 
     x: x, 
 
     y: y 
 
    }); 
 
    } 
 

 
} 
 

 
var img = new Image(); 
 
img.onload = start; 
 
img.src = "https://dl.dropboxusercontent.com/u/139992952/multple/isles.png"; 
 

 
function start() { 
 
    requestAnimationFrame(animate); 
 
} 
 

 

 

 
function animate(time) { 
 

 
    // continue animating until we've reach the last point in points[] 
 
    if (pointIndex < points.length - 1) { 
 
    requestAnimationFrame(animate); 
 
    } 
 

 
    
 
    // get the current point 
 
    var p = points[pointIndex]; 
 

 
    // clear the canvas 
 
    c.clearRect(0, 0, canvas.width, canvas.height); 
 
    
 
    // draw the isles 
 
    c.drawImage(img, 0, 0); 
 
    
 
    // draw the circle at the current waypoint 
 
    c.beginPath(); 
 
    c.arc(p.x, p.y, 5, 0, Math.PI * 2); 
 
    c.closePath(); 
 
    c.fill(); 
 

 
    // increment the pointIndex for the next animation loop 
 
    pointIndex++; 
 

 
}

<canvas id="map" width="900" height="450"> 
 
    <img src="images/sad dinosaur.jpg" /> 
 
    You will need an updated browser to view this page! 
 
    (Chrome,Firefox, etc...) 
 
</canvas>

来源

2014-10-08 20:34:40 markE

哇！非常感谢你，这将非常有帮助！ – user3380392 2014-10-09 20:42:27

它看起来对我来说，你需要的是一个状态机。

目前，您的购物者跟踪两个变量，它们之间告诉它们在画布上的位置。状态机实质上引入了购物者必须执行的一组任务，然后购物者记得当前正在执行的任务。处理这个问题最简单的方法是在动画回调中使用switch语句。缩写版本可能如下所示：

/*animation sequence*/ 
var posX = 550; 
var posY = 450; 
var state = "enter"; 
setInterval(function() { 
    switch(state) { 
     case "enter": 
      if (posY > 390) { 
       posY -= 1; 
      } else { 
       state = "seekProduce"; 
      } 
      break; 
     case "seekProduce": 
      if (posX < 840) { 
       posX += 1; 
      } else { 
       state = "seekBakery"; 
      } 
      break; 
     /* ... */ 
    } 
}, 4);

我已经设置了a jsFiddle with something like what you're aiming for。在这种情况下，购物者有七项任务，但一次只能完成其中一项。

进入商店（只是去了一点点，当你完成，寻求生产部分）
寻求生产部分（向右走，直到你接近部分;完成时，寻找面包店）
寻找面包店（走上一条路，然后寻找下一个过道）
寻找下一个过道（稍微离开一点，然后，如果你高高的，走下过道，否则走上过道）
走上过道（走直到走出过道，然后寻找下一个过道）
沿着过道走下去（走下去，直到走出过道;如果没有更多的走道，然后寻求出口，否则寻求下一个过道）
寻求出口（下去，离开，直到你在正确的位置，然后我们完成）。

除了离开商店，每个任务都设置为在完成后转到另一个任务。我使用switch语句来决定如何移动，给出任何当前的任务。我的实现非常简单 - 改进代码有很多空间 - 但它应该展示一般想法。

来源

2014-10-08 21:47:52

HTML画布if/else

回答

相关问题