master

分支 (1)

管理

管理

master

html5_canvas
/
6-动画制作.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <canvas id="canvas" width="400" height="400"></canvas>
    <div>
        <button id="start">start</button>
        <button id="stop">stop</button>
    </div>
    <script src="jq.js"></script>
    <script>
        var canvas = document.getElementById('canvas'),
            context = canvas.getContext('2d'),
            play = true,
            start = document.getElementById('start'),
            stop = document.getElementById('stop')
        //创建用于控制动画的按钮
        $(start).hide().click(function(){
            $(this).hide()
            $(stop).show()
            play = true
            animate()
        })
        $(stop).click(function(){
            $(this).hide()
            $(start).show()
            play = false
        })

        //运动的正方形
        var x = 0,
            direction = 10


        function animate(){
            if(play){
                x+=direction
                if(x >= canvas.width){
                    direction = -10
                } else if(x<=0){
                    direction = 10
                }
                context.clearRect(0,0,canvas.width, canvas.height)
                context.fillRect(x,250,10,10)
                setTimeout(animate, 1000/60)
            }
        }
        animate()
    </script>
</body>
</html>