Fatal编程技术网
  • javascript/
  • Javascript HTML画布if/else #映射{边框：2px纯黑} window.onload=函数（）{ var canvas=document.getElementById（“映射”）， c=canvas.getContext（“2d”）； c、 fillStyle=“白色”； c、 fillRect（0，0，canvas.width，canvas.height）； /*过道*/ c、 fillStyle=“#009900”； c、 fillRect（20,90,20250）； c、 fillRect（70,90,20250）； c、 fillRect（120,90,20250）； c、 fillRect（170,90,20250）； c、 fillRect（220,90,20250）； c、 fillRect（270,90,20250）； c、 fillRect（470,90,20250）； c、 fillRect（520,90,20250）； c、 fillRect（570,90,20250）； c、 fillRect（620,90,20250）； c、 fillRect（670,90,20250）； c、 fillRect（720,90,20250）； c、 fillRect（770,90,20250）； c、 fillStyle=“#0066cc”； c、 fillRect（320,90,20250）； c、 fillRect（370,90,20250）； c、 fillRect（420,90,20250）； /*部分*/ c、 fillStyle=“#009900”； c、 fillRect（700400200,50）； c、 fillRect（850,0,50300）； c、 fillRect（850、365、50、85）； c、 fillRect（175,0555,50）； c、 fillRect（0,0150,50）； /*节名*/ c、 fillStyle=“白色”； c、 font=“25px Arial”； c、 fillText（“Dairy”，45,30）； c、 fillText（“----肉----”，375，30）； c、 填充文本（“生产”，750435）； c、 填充文本（“B”，865，90）； c、 填充文本（“a”，865115）； c、 填充文本（“k”，865140）； c、 填充文本（“e”，865165）； c、 填充文本（“r”，865190）； c、 填充文本（“y”，865215）； /*通道号*/ c、 fillStyle=“白色”； c、 font=“12px Arial”； c、 填充文本（“16”，22，210）； c、 填充文本（“15”，72，210）； c、 填充文本（“14”，122，210）； c、 填充文本（“13”，172210）； c、 填充文本（“12”，222210）； c、 填充文本（“11”，272210）； c、 填充文本（“10”，322210）； c、 填充文本（“9”，376，210）； c、 填充文本（“8”，426210）； c、 填充文本（“7”，476，210）； c、 填充文本（“6”，526210）； c、 填充文本（“5”，576，210）； c、 填充文本（“4”，6262210）； c、 填充文本（“3”，676，210）； c、 填充文本（“2”，726210）； c、 填充文本（“1”，776210）； c、 beginPath（）； c、 fillStyle=“#009900”； c、 弧（550450,50,0,2，真）； c、 填充（）； c、 beginPath（）； c、 fillStyle=“#009900”； c、 arc（200450,50,0,2，真）； c、 填充（）； /*动画序列*/ var-posX=550； var-posY=450； setInterval（函数（）{ posX+=1； 如果（posX>=540）{ posY+=-1； } c、 fillStyle=“红色”； c、 beginPath（）； c、 弧（posX，posY，5，0，数学π*2，false）； c、 填充（）； },30); }; 帆布地图 您需要更新的浏览器才能查看此页面！ （Chrome、Firefox等）

Javascript HTML画布if/else #映射{边框：2px纯黑} window.onload=函数（）{ var canvas=document.getElementById（“映射”）， c=canvas.getContext（“2d”）； c、 fillStyle=“白色”； c、 fillRect（0，0，canvas.width，canvas.height）； /*过道*/ c、 fillStyle=“#009900”； c、 fillRect（20,90,20250）； c、 fillRect（70,90,20250）； c、 fillRect（120,90,20250）； c、 fillRect（170,90,20250）； c、 fillRect（220,90,20250）； c、 fillRect（270,90,20250）； c、 fillRect（470,90,20250）； c、 fillRect（520,90,20250）； c、 fillRect（570,90,20250）； c、 fillRect（620,90,20250）； c、 fillRect（670,90,20250）； c、 fillRect（720,90,20250）； c、 fillRect（770,90,20250）； c、 fillStyle=“#0066cc”； c、 fillRect（320,90,20250）； c、 fillRect（370,90,20250）； c、 fillRect（420,90,20250）； /*部分*/ c、 fillStyle=“#009900”； c、 fillRect（700400200,50）； c、 fillRect（850,0,50300）； c、 fillRect（850、365、50、85）； c、 fillRect（175,0555,50）； c、 fillRect（0,0150,50）； /*节名*/ c、 fillStyle=“白色”； c、 font=“25px Arial”； c、 fillText（“Dairy”，45,30）； c、 fillText（“----肉----”，375，30）； c、 填充文本（“生产”，750435）； c、 填充文本（“B”，865，90）； c、 填充文本（“a”，865115）； c、 填充文本（“k”，865140）； c、 填充文本（“e”，865165）； c、 填充文本（“r”，865190）； c、 填充文本（“y”，865215）； /*通道号*/ c、 fillStyle=“白色”； c、 font=“12px Arial”； c、 填充文本（“16”，22，210）； c、 填充文本（“15”，72，210）； c、 填充文本（“14”，122，210）； c、 填充文本（“13”，172210）； c、 填充文本（“12”，222210）； c、 填充文本（“11”，272210）； c、 填充文本（“10”，322210）； c、 填充文本（“9”，376，210）； c、 填充文本（“8”，426210）； c、 填充文本（“7”，476，210）； c、 填充文本（“6”，526210）； c、 填充文本（“5”，576，210）； c、 填充文本（“4”，6262210）； c、 填充文本（“3”，676，210）； c、 填充文本（“2”，726210）； c、 填充文本（“1”，776210）； c、 beginPath（）； c、 fillStyle=“#009900”； c、 弧（550450,50,0,2，真）； c、 填充（）； c、 beginPath（）； c、 fillStyle=“#009900”； c、 arc（200450,50,0,2，真）； c、 填充（）； /*动画序列*/ var-posX=550； var-posY=450； setInterval（函数（）{ posX+=1； 如果（posX>=540）{ posY+=-1； } c、 fillStyle=“红色”； c、 beginPath（）； c、 弧（posX，posY，5，0，数学π*2，false）； c、 填充（）； },30); }; 帆布地图 您需要更新的浏览器才能查看此页面！ （Chrome、Firefox等）

javascript canvas

Javascript HTML画布if/else #映射{边框：2px纯黑} window.onload=函数（）{ var canvas=document.getElementById（“映射”）， c=canvas.getContext（“2d”）； c、 fillStyle=“白色”； c、 fillRect（0，0，canvas.width，canvas.height）； /*过道*/ c、 fillStyle=“#009900”； c、 fillRect（20,90,20250）； c、 fillRect（70,90,20250）； c、 fillRect（120,90,20250）； c、 fillRect（170,90,20250）； c、 fillRect（220,90,20250）； c、 fillRect（270,90,20250）； c、 fillRect（470,90,20250）； c、 fillRect（520,90,20250）； c、 fillRect（570,90,20250）； c、 fillRect（620,90,20250）； c、 fillRect（670,90,20250）； c、 fillRect（720,90,20250）； c、 fillRect（770,90,20250）； c、 fillStyle=“#0066cc”； c、 fillRect（320,90,20250）； c、 fillRect（370,90,20250）； c、 fillRect（420,90,20250）； /*部分*/ c、 fillStyle=“#009900”； c、 fillRect（700400200,50）； c、 fillRect（850,0,50300）； c、 fillRect（850、365、50、85）； c、 fillRect（175,0555,50）； c、 fillRect（0,0150,50）； /*节名*/ c、 fillStyle=“白色”； c、 font=“25px Arial”； c、 fillText（“Dairy”，45,30）； c、 fillText（“----肉----”，375，30）； c、 填充文本（“生产”，750435）； c、 填充文本（“B”，865，90）； c、 填充文本（“a”，865115）； c、 填充文本（“k”，865140）； c、 填充文本（“e”，865165）； c、 填充文本（“r”，865190）； c、 填充文本（“y”，865215）； /*通道号*/ c、 fillStyle=“白色”； c、 font=“12px Arial”； c、 填充文本（“16”，22，210）； c、 填充文本（“15”，72，210）； c、 填充文本（“14”，122，210）； c、 填充文本（“13”，172210）； c、 填充文本（“12”，222210）； c、 填充文本（“11”，272210）； c、 填充文本（“10”，322210）； c、 填充文本（“9”，376，210）； c、 填充文本（“8”，426210）； c、 填充文本（“7”，476，210）； c、 填充文本（“6”，526210）； c、 填充文本（“5”，576，210）； c、 填充文本（“4”，6262210）； c、 填充文本（“3”，676，210）； c、 填充文本（“2”，726210）； c、 填充文本（“1”，776210）； c、 beginPath（）； c、 fillStyle=“#009900”； c、 弧（550450,50,0,2，真）； c、 填充（）； c、 beginPath（）； c、 fillStyle=“#009900”； c、 arc（200450,50,0,2，真）； c、 填充（）； /*动画序列*/ var-posX=550； var-posY=450； setInterval（函数（）{ posX+=1； 如果（posX>=540）{ posY+=-1； } c、 fillStyle=“红色”； c、 beginPath（）； c、 弧（posX，posY，5，0，数学π*2，false）； c、 填充（）； },30); }; 帆布地图 您需要更新的浏览器才能查看此页面！ （Chrome、Firefox等）,javascript,canvas,Javascript,Canvas,我正在尝试制作一个动画，其中红色圆圈将在走廊上来回移动（就像一个迷宫），而不在走廊上绘画。我一直在尝试使用if/else语句来强制执行动画的方向。但是，当我尝试使用第二个if语句来改变圆的方向时，它会在该坐标点开始圆。这是一种方法： 制作一个要沿其设置动画的线坐标数组 沿您希望圆圈访问的路线计算航路点，并将其保存在阵列中 创建动画循环 在循环内部，（1）清除画布，（2）绘制岛，（3）在阵列中的下一个点绘制圆 下面是示例代码和演示： //画布和上下文引用 var canvas=documen

我正在尝试制作一个动画，其中红色圆圈将在走廊上来回移动（就像一个迷宫），而不在走廊上绘画。我一直在尝试使用if/else语句来强制执行动画的方向。但是，当我尝试使用第二个if语句来改变圆的方向时，它会在该坐标点开始圆。

这是一种方法：

  • 制作一个要沿其设置动画的线坐标数组

  • 沿您希望圆圈访问的路线计算航路点，并将其保存在阵列中

  • 创建动画循环

  • 在循环内部，（1）清除画布，（2）绘制岛，（3）在阵列中的下一个点绘制圆

下面是示例代码和演示：

//画布和上下文引用
var canvas=document.getElementById（“映射”）；
var c=canvas.getContext（“2d”）；
//设置一些上下文样式
c、 fillStyle=“白色”；
c、 fillRect（0，0，canvas.width，canvas.height）；
c、 fillStyle='红色'；
var startTime；
var区间=50；
//定义在岛上/岛下的线
变量行=[]
推({
x:553，
y:454
});
推({
x:672，
y:378
});
推({
x:815，
y:368
});
推({
x:812，
y:70
});
推({
x:752，
y:71
});
推({
x:761，
y:365
});
推({
x:708，
y:364
});
推({
x:703，
y:76
});
推({
x:204，
y:72
});
推({
x:200，
y:454
});
//沿每条线按间隔计算点
//将所有计算的点放入点[]数组中
var点=[]；
var pointIndex=0；
对于（变量i=1；i

您需要更新的浏览器才能查看此页面！
（Chrome、Firefox等）
在我看来，你需要的是一台状态机。

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

    <!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>

/*动画序列*/
var posX

/*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);