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元素，不影响性能。