话不多说,请看代码:
- <!doctype html>
- <html>
- <head>
- <meta charset="utf-8">
- <title>
- 万花筒
- </title>
- <style>
- canvas{ background:#eee; }
- </style>
- <script>
- window.onload = function() {
- var canvas = document.getElementById("canvas");
- var cobj = canvas.getContext("2d");
- var arr = [];
- var t = setInterval(function() {
- cobj.clearRect(0, 0, 600, 600);
- for (var i = 0; i < arr.length; i++) {
- cobj.save();
- cobj.translate(300, 300);
- cobj.scale(arr[i].scales, arr[i].scales);
- cobj.rotate(arr[i].angle * Math.PI / 180);
- cobj.fillStyle = arr[i].color;
- cobj.fillRect(arr[i].num, arr[i].num, 30, 30);
- cobj.restore();
- }
- },
- 50);
- setInterval(function() {
- for (var i = 0; i < arr.length; i++) {
- if (arr[i].num <= 0) {
- arr.splice(i, 1);
- continue;
- }
- arr[i].angle += 2;
- arr[i].num -= 0.2;
- arr[i].scales -= 0.002;
- if (arr[i].scales <= 0.2) {
- arr[i].scales = 0.2;
- }
- }
- },
- 50);
- setInterval(function() {
- var rect = {
- angle: 0,
- num: 150,
- scales: 1,
- color: "rgb(" + parseInt(Math.random() * 255) + "," + parseInt(Math.random() * 255) + "," + parseInt(Math.random() * 255) + ")"
- };
- arr.push(rect);
- },
- 600);
- }
- </script>
- </head>
- <body>
- <canvas width="600" height="600" id="canvas">
- </canvas>
- </body>
- </html>
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持脚本之家!
来源: