HTML5练习题

1. 通过canvas写一个小物块的移动

 <canvas width="200" height="400" id="canvas1"></canvas>
    <script>
        var oCanvas = document.getElementById('canvas1'); //获取canvas
        var ctx = oCanvas.getContext('2d'); //获取canvas的上下文
        var h = oCanvas.height;
        var y = 0;
        var y1 = -40;
        ctx.fillStyle = 'blue';
        ctx.fillRect(50, 0, 100, 40);
        function drawRect() {
            y = y + 40;
            y1 = y1 + 40;
            ctx.fillRect(50, 0, 100, y);
            ctx.clearRect(50, 0, 100, y1);
        }
        var timer = setInterval(function () {
            drawRect();
            if (y >= h) {
                clearInterval(timer);
            }
        }, 500);
    </script>

注意：操作的是canvas的内容，没有操作dom元素，不影响性能。