Fatal编程技术网
  • javascript/
  • Javascript HTML5上下文/画布-何时调用上下文绘制

Javascript HTML5上下文/画布-何时调用上下文绘制

javascript html html5-canvas

Javascript HTML5上下文/画布-何时调用上下文绘制,javascript,html,html5-canvas,html5-animation,Javascript,Html,Html5 Canvas,Html5 Animation,我正在写一个小的面向对象风格的javasscript演示——只是为了画一堆在屏幕上移动的球。在这一点上没有什么特别的，没有碰撞检测或者其他的。认为我的球杆是安全的。JS类是好的。 我的问题是：我应该把ball.draw（上下文）称为哪里？按照我的设置方式，将球吸引到屏幕上的唯一方法似乎是将调用放在generateBall（）中。但这意味着每个球只抽一次 所以如果有人能指出我在这里的错误，我真的很感激。这不是家庭作业——只是试图更好地处理javascript和画布 <!DOCTYPE HTM

我正在写一个小的面向对象风格的javasscript演示——只是为了画一堆在屏幕上移动的球。在这一点上没有什么特别的，没有碰撞检测或者其他的。认为我的球杆是安全的。JS类是好的。

我的问题是：我应该把ball.draw（上下文）称为哪里？按照我的设置方式，将球吸引到屏幕上的唯一方法似乎是将调用放在generateBall（）中。但这意味着每个球只抽一次

所以如果有人能指出我在这里的错误，我真的很感激。这不是家庭作业——只是试图更好地处理javascript和画布

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script src="ball.js"></script>
<script src="utils.js"></script>
...
    <canvas id="canvas" width="600" height="480"></canvas>
    <script type="text/javascript">
        window.addEventListener('load', eventWindowLoaded, false);

        function eventWindowLoaded() {
            canvasApp();    
        }

        function canvasSupport() {
            return true;    
        }

        function canvasApp() {
            if(!canvasSupport()) {
                return; 
            }
        }
        console.log("app entered");
        var numBalls = 45;
        //var numBalls = demo.numberofballs.value;
        var maxSize = 8;
        var minSize = 5; 
        var maxSpeed = maxSize + 5;
        var balls = new Array();
        var tempBall;
        var tempX;
        var tempY;
        var tempSpeed;
        var tempAngle;
        var tempRadius;
        var tempRadians;
        var tempXunits;
        var tempYunits;

        canvas = document.getElementById("canvas");
        context = canvas.getContext("2d");

        generateBalls();

        setInterval(drawScreen, 33);

        function generateBalls() {
            console.log("Make some balls");
            for(var index = 0; index < numBalls; index++) {
                var tempRadius = Math.floor(Math.random()*maxSize)+minSize;
                var ball = new Ball(tempRadius, "#000000"); 
                ball.x = tempRadius * 2 + (Math.floor(Math.random()*canvas.width) -  tempRadius * 2);
                ball.y = tempRadius * 2 + (Math.floor(Math.random()*canvas.height) - tempRadius * 2);
                ball.speed = maxSpeed - tempRadius;
                ball.angle = Math.floor(Math.random()*360);
                ball.dx = Math.cos(tempRadians) * tempSpeed;
                ball.dy = Math.sin(tempRadians) * tempSpeed;
                // here outputted balls but a stupid place to put it LOL
                balls.push(ball);



            }

        }

        function drawScreen() {
            console.log("draw screen");



            // loop through all balls and adjust their position
            // a BallManager could do this more cleanly
            for(var index = 0; index < balls.length; index++) {

                context.fillStyle="#EE00EE";
                context.fillRect(0,0,canvas.width, canvas.height);

                // Box
                context.strokeStyle = "#ff0043";
                context.strokeRect(1,1,canvas.width-2, canvas.height-2);

                // place balls
                context.fillStyle = "#ff8783";
                console.log("ball mover loop in drawscreen");
                // no var ball now

                ball = balls[index];
                ball.x += ball.dx;
                ball.y += ball.dy;
                ball.draw(context);
                //checkBoundaries(balls[index]);
                if(ball.x > canvas.width || ball.x < 0) {
                ball.angle = 180 - ball.angle;
                updateBall(ball);   
                    } else if(ball.y > canvas.height || ball.y < 0) {
                        ball.angle = 360 - ball.angle;
                        updateBall(ball);   
                        //ball.draw(context);
                }

            }

        }   

        //function checkBoundaries(ball) {
            //console.log("Check Bounds: " + " " + "ball.x: " + ball.x + " " + //"ball.y: " + ball.y);

        //}

        function updateBall(ball) {
            ball.radians = ball.angle * Math.PI / 180;
            ball.dx = Math.cos(ball.radians) * ball.speed;
            ball.dy = Math.sin(ball.radians) * ball.speed;
            //ball.draw(context);
        }

    </script>
</body>
</html>


无标题文件
...
addEventListener（'load'，eventWindowLoaded，false）；
函数eventWindowLoaded（）{
canvasApp（）；
}
函数canvasSupport（）{
返回true；
}
函数canvasApp（）{
如果（！canvasSupport（））{
返回；
}
}
console.log（“输入应用程序”）；
var=45；
//var numBalls=demo.numberofballs.value；
var maxSize=8；
var-minSize=5；
var maxSpeed=maxSize+5；
var balls=新数组（）；
var tempBall；
var tempX；
var tempY；
速度；
可变温度角；
变温半径；
变幅弧度；
var tempXunits；
var tempYunits；
canvas=document.getElementById（“canvas”）；
context=canvas.getContext（“2d”）；
生成球（）；
设置间隔（牵引屏，33）；
函数generateBalls（）{
console.log（“做一些球”）；
对于（var索引=0；索引canvas.width | | ball.x<0）{
ball.angle=180-ball.angle；
更新球；
}else if（ball.y>canvas.height | | ball.y<0）{
ball.angle=360-ball.angle；
更新球；
//球。画（上下文）；
}
}
}   
//函数检查边界（球）{
//log（“检查边界：“+”+“+”ball.x:“+ball.x+”+/“ball.y:“+ball.y”）；
//}
函数updateBall（ball）{
ball.radians=ball.angle*Math.PI/180；
ball.dx=数学cos（球弧度）*球速度；
ball.dy=数学.sin（球的弧度）*球的速度；
//球。画（上下文）；
}
谢谢你的建议，
Marc

您的示例包含多个错误，请检查您修改的代码。它是有效的，但您必须扩展并更正它

<!DOCTYPE HTML>
<html>
  <head>
  <meta charset="utf-8">
  <title>Untitled Document</title>
  <script type="text/javascript">
    // next lines is a Ball() implementation code
    Ball = function(radius,color) {
        this.radius=radius;
        this.color=color;
    };
    Ball.prototype.x=0;
    Ball.prototype.y=0;
    Ball.prototype.speed=0;
    Ball.prototype.angle=0;
    Ball.prototype.dx=0;
    Ball.prototype.dy=0;
    Ball.prototype.radius=10;
    Ball.prototype.color="#000";
    Ball.prototype.draw=function() {

        context.beginPath();
        context.arc(this.x,this.y,this.radius,0,Math.PI*2,true);
        context.lineWidth = 5;
        context.strokeStyle = this.color; // line color
        context.stroke();
        context.closePath();
    };

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

    function eventWindowLoaded() {
        canvasApp();    

        //console.log("app entered");
        window.canvas = document.getElementById("canvas");
        window.context = canvas.getContext("2d");

        generateBalls();
        // if you want to use setInterval() instead replace next line
        setTimeout(drawScreen, 33);
    }

    function canvasSupport() {
        return true;    
    }

    function canvasApp() {
        if(!canvasSupport()) {
            return;
        }
    }

    var numBalls = 45;
    //var numBalls = demo.numberofballs.value;
    var maxSize = 8;
    var minSize = 5;
    var maxSpeed = maxSize + 5;
    var balls = new Array();
    var tempBall;
    var tempX;
    var tempY;
    var tempSpeed;
    var tempAngle;
    var tempRadius;
    var tempRadians;
    var tempXunits;
    var tempYunits;

    function generateBalls() {
        //console.log("Make some balls");
        for(var index = 0; index < numBalls; index++) {
            var tempRadius = Math.floor(Math.random()*maxSize)+minSize;
            var tempRadians = Math.random()*Math.PI;
            var tempSpeed = 10;
            var ball = new Ball(tempRadius, "#000000");
            ball.x = tempRadius * 2 + (Math.floor(Math.random()*canvas.width) -  tempRadius * 2);
            ball.y = tempRadius * 2 + (Math.floor(Math.random()*canvas.height) - tempRadius * 2);
            ball.speed = maxSpeed - tempRadius;
            ball.angle = Math.floor(Math.random()*360);
            ball.dx = Math.cos(tempRadians) * tempSpeed;
            ball.dy = Math.sin(tempRadians) * tempSpeed;
            // here outputted balls but a stupid place to put it LOL
            balls.push(ball);
        }
    }

    function drawScreen() {
        console.log("draw screen");


        context.fillStyle="#EE00EE";
        context.fillRect(0,0,canvas.width, canvas.height);

        // Box
        context.strokeStyle = "#ff0043";
        context.strokeRect(1,1,canvas.width-2, canvas.height-2);

        // loop through all balls and adjust their position
        // a BallManager could do this more cleanly
        for(var index = 0; index < balls.length; index++) {
            // place balls
            context.fillStyle = "#008700";
            //console.log("ball mover loop in drawscreen");
            // no var ball now

            ball = balls[index];
            ball.x += ball.dx;
            ball.y += ball.dy;
            ball.draw(context);
            //checkBoundaries(balls[index]);
            if(ball.x > canvas.width || ball.x < 0) {
                ball.angle = 180 - ball.angle;
                updateBall(ball);   
            } else if(ball.y > canvas.height || ball.y < 0) {
                ball.angle = 360 - ball.angle;
                 updateBall(ball);   
                //ball.draw(context);
            }

        }
        // if you want to use setInterval() instead remove next line
        setTimeout(drawScreen, 33);
    }   

    //function checkBoundaries(ball) {
        //console.log("Check Bounds: " + " " + "ball.x: " + ball.x + " " + //"ball.y: " + ball.y);

    //}

    function updateBall(ball) {
        ball.radians = ball.angle * Math.PI / 180;
        ball.dx = Math.cos(ball.radians) * ball.speed;
        ball.dy = Math.sin(ball.radians) * ball.speed;
        //ball.draw(context);
    }

  </script>
  </head>
  <body>
    <canvas id="canvas" width="600" height="480" style="background:red;"></canvas>
  </body>
</html>


无标题文件
//下一行是Ball（）实现代码
球=函数（半径、颜色）{
这个。半径=半径；
这个。颜色=颜色；
};
Ball.prototype.x=0；
Ball.prototype.y=0；
Ball.prototype.speed=0；
球.原型.角度=0；
Ball.prototype.dx=0；
Ball.prototype.dy=0；
球.原型.半径=10；
Ball.prototype.color=“#000”；
Ball.prototype.draw=function（）{
context.beginPath（）；
弧（this.x，this.y，this.radius，0，Math.PI*2，true）；
context.lineWidth=5；
context.strokeStyle=this.color；//线条颜色
stroke（）；
closePath（）；
};
addEventListener（'load'，eventWindowLoaded，false）；
函数eventWindowLoaded（）{
canvasApp（）；
//console.log（“输入应用程序”）；
window.canvas=document.getElementById（“canvas”）；
window.context=canvas.getContext（“2d”）；
生成球（）；
//如果要使用setInterval（），请替换下一行
设置超时（drawScreen，33）；
}
函数canvasSupport（）{
返回true；
}
函数canvasApp（）{
如果（！canvasSupport（））{
返回；
}
}
var=45；
//var numBalls=demo.numberofballs.value；
var maxSize=8；
var-minSize=5；
var maxSpeed=maxSize+5；
var balls=新数组（）；
var tempBall；
var tempX；
var tempY；
速度；
可变温度角；
变温半径；
变幅弧度；
var tempXunits；
var tempYunits；
功能

requestAnimationFrame(redraw);



function redraw()
{
    var blah, blahblah;
    ...

    requestAnimationFrame(redraw);
}



function redraw()
{
    ...

    if (!finished) requestAnimationFrame(redraw);
}