canvas 万花筒
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#myCanvas1 {
background-color: beige;
}
</style>
</head>
<body>
<canvas id="myCanvas1" width="800" height="800"></canvas>
</body>
<script type="text/javascript">
var can = document.getElementById("myCanvas1");
var pen = can.getContext("2d");
function getRandomColor() {
return '#' + Math.floor(Math.random() * 16777215).toString(16);
}
var num = 0;
var x = 150;
var y = 150;
var a = 30;
var arr = [];
var color;
setInterval(function() {
color = getRandomColor();
arr.push([x, y, a, num, color]);
}, 600);
var timer1 = null;
timer1 = setInterval(function() {
//小方块的变化
pen.clearRect(0, 0, can.width, can.height);
for(var i = 0; i < arr.length; i++) {
arr[i][0] *= 0.995;
arr[i][1] *= 0.997;
arr[i][2] *= 0.997;
arr[i][3] += 1;
bianliang(arr[i][0], arr[i][1], arr[i][2], arr[i][3], arr[i][4]);
}
}, 100)
//画小方块
function bianliang(x, y, a, num, color) {
pen.save();
pen.translate(300, 300);
pen.rotate(num * Math.PI / 50);
pen.beginPath();
pen.fillStyle = color;
pen.fillRect(x, y, a, a);
pen.fill();
pen.stroke();
pen.restore();
};
</script>
</html>
