Question

我正在尝试单击一个简单的画布应用程序来演示我的演示文稿。只需单击按钮，就会有一个球以恒定的速度从左向右移动。我只是想展示一系列事件。

这是我开始的地方并不多。 http://jsfiddle.net/noppanit/z5VwL/1/

<canvas id="myCanvas" width="578" height="200"></canvas>

<input type="button" onclick="clickToAddBall()" value="Click"/>



    var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');

context.beginPath();
context.moveTo(10, 10);
context.lineTo(400, 10);
context.stroke();


function clickToAddBall() {
    // Do something
}

function gameLoop() {
    var loop = 400;
    setInterval(function() {
        loop = loop - 10;
        drawABall(loop);
    }, 200);
}
gameLoop();

function drawABall(positionX) {
      var centerX = canvas.width / 2;
      var centerY = canvas.height / 2;
      var radius = 5;

      context.beginPath();
      context.arc(positionX, 10, radius, 0, 2 * Math.PI, false);
      context.fillStyle = 'green';
      context.fill();
      context.lineWidth = 5;
      context.strokeStyle = '#003300';
      context.stroke();
}

Answer 1

begginers的简单画布结构：

1）动画循环：

    // RequestAnimFrame: a browser API for getting smooth animations
window.requestAnimFrame = (function() {
    return window.requestAnimationFrame    || 
        window.webkitRequestAnimationFrame || 
        window.mozRequestAnimationFrame    || 
        window.oRequestAnimationFrame      || 
        window.msRequestAnimationFrame     ||  
        function( callback ) {
            return window.setTimeout(callback, 1000 / 1000);
        };
})();
window.cancelRequestAnimFrame = (function() {
    return window.cancelAnimationFrame              ||
        window.webkitCancelRequestAnimationFrame    ||
        window.mozCancelRequestAnimationFrame       ||
        window.oCancelRequestAnimationFrame         ||
        window.msCancelRequestAnimationFrame        ||
        clearTimeout
} )();

2）创建球

    ball = {
    x: canvas.width / 2 - 10,
    y: canvas.height / 2 ,
    r: 12,
    c: 'white',
    vx: 8,
    vy: 8,

    // function for drawing ball on canvas
    draw: function() {
        ctx.beginPath();
        ctx.fillStyle = this.c;
        ctx.arc(this.x, this.y, this.r, 0, Math.PI*2, false);
        ctx.fill();
    }

3）例如，将EventListener添加到窗口，在处理程序中我们运行动画：

var canvas = document.getElementById('mycanvas'),
var run = true;
canvas.addEventListener("mousedown", btnClick, true);
function btnClick(e) {
    if(run){
                    ball.draw();
        animloop();
        run = false;
    }
}

4）使用更新功能，在每一帧上改变球的x，y位置。

function Update() {
    // Move the ball
    ball.x += ball.vx;
    ball.y += ball.vy;
}

5）绘制所有内容的函数，unlimeted循环：

function animloop() {
    init = requestAnimFrame(animloop);
    Update();
}

6）球将从画布窗口消失。对于它你需要碰撞检测。如果ball.x＆gt; some.value THEN ball.vx = 0;如果您不需要vy，可以将其设置为零。祝你好运！

如何在HTML5中移动一条线？

1 个答案: