HTML5 动画演示

最新推荐文章于 2024-08-14 12:55:09 发布

莫兰迪不会没有瓶子

最新推荐文章于 2024-08-14 12:55:09 发布

阅读量834

点赞数

html5 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

[代码] [HTML]代码

 
<!DOCTYPE html>
 
<html lang="en">
 
<head>
 
<meta charset="UTF-8"/>
 
<title>Animations in HTML5 using the canvas element</title>
 
<script></script>
 
</head>
 
<body>
 
<canvas id="canvas" width="1000" height="600">Your browser does not support the
 
<code>&lt;canvas&gt;</code>-element. Please think about updating your browser!</canvas>
 
<div id="controls">
 
<button type="button" onclick="speed(-0.1);">Slower</button>
 
<button type="button" onclick="play(this);">Play</button>
 
<button type="button" onclick="speed(+0.1);">Faster</button>
 
</div>
 
</body>
 
</html>

[代码] [JavaScript]代码

 
function drawCanvas() {
 
    c.clearRect(0, 0, c.canvas.width, c.canvas.height); // Clear the (displayed)
 
                            // canvas to avoid errors
 
    c.save();       // Saves the current state of properties (coordinates!)
 
    drawGrass();        // Draws the background (grass)
 
    c.translate(carX, 0);   // Does some coordinate transformation
 
    drawCar();      // Draws the car (redraws hidden canvas)
 
    c.drawImage(w.canvas, 0, carY); // Draws the car actually to visible canvas
 
    c.restore();    // Restores to last saved state (original coordinates!)
 
    carX += dx;     // Increases the position by the dx we set per time
 
    carAlpha += dx / radius;    // Increases the angle of the tires by the ratio
 
 
 
    if(carX > c.canvas.width)    // We keep some periodic boundary conditions
 
        carX = -carWidth - 10;  // We could also reverse the speed dx *= -1;
 
}