html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="28.js"></script>
<style type="text/css">
body{ margin:0; padding:0;}
</style>
</head>
<body onLoad="draw('canvas')">
<canvas id="canvas" width='400' height="400"></canvas>
</body>
</html>
js
// JavaScript Document
var context;
var width,height;
var i;
function draw(id){
var canvas = document.getElementById(id);
context = canvas.getContext('2d');
width = canvas.width;
height = canvas.height;
setInterval(painting,100);
i = 0;
}
function painting(){
// context.fillStyle = "green";
// context.fillRect(i,i,10,10);
// context.fillRect(400-i,400-i,10,10);
// context.fillRect(400-i,400-i,10,10);
// context.fillRect(0,400-i,10,10);
context.fillStyle = "green";
context.fillRect(0,0,width,height);
context.clearRect(10,10,width,height);
context.fillStyle = "green";
context.fillRect(i,20,10,10);
i=i+20;
}
效果图：