Question

我一直在做一个爱好项目，它正在重建HTML5中的旧DOS游戏Gotcha。带有绘图块的部分几乎已经完成（除了一些讨厌的错误），但我现在正在努力的事情是画出游戏所具有的微调器。我已经从微调器上传了一个有多个变形的截图。 http://www.mvdms.com/gotcha/spinner.png。我的问题是：如何使用canvas对象在HTML5中重现这样的高级动画？

我到处搜索类似的动画，但我找不到它。我当前的微调器代码非常简单：

初始化：

    APP.spinnerLines = new Array();

    for(i = 0; i< 12; i++)
    {
        var line = new Line(13,20);
        line.points.push(new Point(i*5,0));

        APP.spinnerLines.push(line);
    }

更新:(每个FPS）

        for(i in APP.spinnerLines)
        {                       
            var lpX;
            var lpY;

            for(j in APP.spinnerLines[i].points)
            {
                lpX = APP.spinnerLines[i].points[j].x;
                lpY = APP.spinnerLines[i].points[j].y;

                context.moveTo(lpX, lpY);
                if(APP.spinnerLines[i].points[parseInt(j)+1] !== undefined)
                {
                    lpX = APP.spinnerLines[i].points[parseInt(j)+1].x;
                    lpY = APP.spinnerLines[i].points[parseInt(j)+1].y;

                    context.lineTo(lpX, lpY);
                }
            }
        }

稍后在代码中也会有一点碰撞检测，但是现在我认为这与对象无关;）

那么，有没有人可以帮我在HTML5中绘制这个形状？

我可以在http://www.mvdms.com/gotcha上查看项目的当前状态（使用箭头键移动）

提前致谢！

如何在HTML5中有效地绘制多个线条形状？

0 个答案: