JavaScript + Canvas移动对象

Question

我正试图在Canvas中进行一场乒乓球比赛。 我想我会先让球在街对面移动。 问题是当我循环绘制函数时它变成一条线，而不是每个新位置的一个球。 （见下面的截图。）

我想清除画布然后重新绘制一切都可以解决问题，但显然不是。

这是我的代码：

HTML：

<!doctype html>
<html lang="sv">
    <head>
        <meta charset="utf-8" />
        <link rel="stylesheet" href="style.css">
        <title>Super Pong!</title>
        <script type="text/javascript" src="superPong.js"></script>
    </head>

    <body>
        <nav>
            <ul id="navlist">
                <li><a href="#">Button 1</a></li>
                <li><a href="#">Button 2</a></li>
                <li><a href="#">Button 3</a></li>
                <li><a href="#">Button 4</a></li>
            </ul>
        </nav>
        <div id="content">
            <canvas width="1000" height="600">Your browser does not support HTML5 Canvas</canvas>
        </div>
    </body>
</html>

CSS：

body {
    background-color: #E93D19;
    color: #341711;
    font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
    font-size: 2vw;
}

#content {
    text-align: center;
    padding-top: 3%;
}

canvas {
    background-color: white;
}

nav {
    height: 100px;
    width: 100%;
    text-align: center;
    font-size: 3vw;
}

#navlist {
    background-color: #FD851D;
    list-style-type: none;
    margin: 0;
    overflow: hidden;
    padding: 0;
    transform: translateY(10%);
}

#navlist li {
    display: inline;
}

#navlist a {
    color: #C91D09;
    text-decoration: none;
}

#navlist a:hover {
    background-color: #C91D09;
    color: #FD851D;
}

JavaScript的：

window.addEventListener("load", eventWindowLoaded, false);

function eventWindowLoaded(){
    var canvas=document.querySelector("canvas");
    var ctx=canvas.getContext("2d");
    var canWidth=canvas.width;
    var canHeight=canvas.height;
    var pi=Math.PI;
    var timer=null;
    var ms=16;

    var gameBall={
        size:30,
        positionX:0,
        positionY:0,
        color:"#FFF",

        set setSize(newSize){
            this.size=newSize;
        },
        set setPosX(posX){
            this.positionX=posX;
        },
        set setPosY(posY){
            this.positionY=posY;
        },
        set setColor(newColor){
            this.color=newColor;
        },
        get getSize(){
            return this.size;
        },
        get getPosX(){
            return this.positionX;
        },
        get getPosY(){
            return this.positionY;
        },
        get getColor(){
            return this.color;
        }
    }

    function clearCanvas(){
        ctx.clearRect(0,0,canWidth,canHeight);
    }

    function drawBackground(){
        ctx.fillStyle="#000";
        ctx.fillRect(0,0,canWidth,canHeight);
    }

    function drawBall(){
        ctx.save();
        var posX=gameBall.getPosX;
        var posY=gameBall.getPosY;
        var size=gameBall.getSize;
        ctx.fillStyle=gameBall.getColor;
        ctx.arc(posX,posY,size,0,2*pi,true);
        ctx.fill();
        ctx.restore();
    }

    function updateBall(){
        //clearCanvas();
        //drawBackground();
        gameBall.setPosX=gameBall.getPosX+3;
        gameBall.setPosY=gameBall.getPosY+3;
        drawBall();
    }

    gameBall.setPosX=100;
    gameBall.setPosY=100;
    drawBackground();

    timer=setInterval(updateBall, ms);
}

Answer 1

以下是您的小提琴的工作版本。 它针对这两个问题进行了重构：

之前的球仍然存在，因为Canvas不允许重新定位现有的球图。 .save和.restore命令只保存和恢复上下文属性 - 它们不会在画布上保存和恢复绘图。 相反，您必须擦除画布并将球重新绘制到新位置。 所以（1）drawBackground，（2）update＆（3）updateBall中的drawBall是一种在画布上“移动”的正确方法。
每次绘制context.arc （ball）时都必须调用context.beginPath 。 如果没有，将重新绘制.arc命令的所有先前版本。

 function eventWindowLoaded(){ var canvas=document.querySelector("canvas"); var ctx=canvas.getContext("2d"); var canWidth=canvas.width; var canHeight=canvas.height; var pi=Math.PI; var timer=null; var ms=1000/60*1; var gameBall={ size:30, positionX:0, positionY:0, color:"#FFF", set setSize(newSize){ this.size=newSize; }, set setPosX(posX){ this.positionX=posX; }, set setPosY(posY){ this.positionY=posY; }, set setColor(newColor){ this.color=newColor; }, get getSize(){ return this.size; }, get getPosX(){ return this.positionX; }, get getPosY(){ return this.positionY; }, get getColor(){ return this.color; } } function clearCanvas(){ ctx.clearRect(0,0,canWidth,canHeight); } function drawBall(){ ctx.save(); var posX=gameBall.getPosX; var posY=gameBall.getPosY; var size=gameBall.getSize; ctx.fillStyle=gameBall.getColor; ctx.beginPath(); ctx.arc(posX,posY,size,0,2*pi,true); ctx.fill(); ctx.restore(); } function updateBall(){ //clearCanvas(); gameBall.setPosX=gameBall.getPosX+3; gameBall.setPosY=gameBall.getPosY+3; ctx.fillStyle='black'; ctx.fillRect(0,0,canvas.width,canvas.height); drawBall(); } gameBall.setPosX=35; gameBall.setPosY=35; timer=setInterval(updateBall, ms); } eventWindowLoaded();

 body { background-color: #E93D19; color: #341711; font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif; font-size: 2vw; } #content { text-align: center; padding-top: 3%; } canvas { background-color: black; } nav { height: 100px; width: 100%; text-align: center; font-size: 3vw; } #navlist { background-color: #FD851D; list-style-type: none; margin: 0; overflow: hidden; padding: 0; transform: translateY(10%); } #navlist li { display: inline; } #navlist a { color: #C91D09; text-decoration: none; } #navlist a:hover { background-color: #C91D09; color: #FD851D; }

 <body> <nav> <ul id="navlist"> <li><a href="#">Button 1</a></li> <li><a href="#">Button 2</a></li> <li><a href="#">Button 3</a></li> <li><a href="#">Button 4</a></li> </ul> </nav> <div id="content"> <canvas width="600" height="400">Your browser does not support HTML5 Canvas</canvas> </div> </body>

Answer 2

每次重绘帧时都需要清除画布。

绘制路径时，需要确保每帧都创建一个新路径，而不是添加到当前路径 。 这通常通过调用ctx.beginPath()来清除上下文的当前路径来完成。

JavaScript + Canvas移动对象

问题描述

2 个解决方案

解决方案1
1 2016-05-19 18:12:16

解决方案2
0 2016-05-19 19:25:12

JavaScript + Canvas移动对象

问题描述

2 个解决方案

解决方案1 1 2016-05-19 18:12:16

解决方案2 0 2016-05-19 19:25:12

解决方案1
1 2016-05-19 18:12:16

解决方案2
0 2016-05-19 19:25:12