效果如下:
代码如下:
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8">
- <title>
- Canvas
- </title>
- <style type="text/CSS">
- *{ margin: 0; padding: 0; } html, body{ height: 100%; } #myCanvas{ background-color:
- #87CEEB; }
- </style>
- </head>
- <body>
- <canvas id="myCanvas" width="1000" height="600">
- 您的浏览器不支持Canvas元素
- </canvas>
- <script type="text/javascript">
- var canvas = document.getElementById("myCanvas");
- var context = canvas.getContext("2d");
- var practicles = [];
- for (var i = 0; i < 500; i++) { //循环生成500粒
- practicles.push({
- x: Math.random() * (window.innerWidth),
- y: Math.random() * (window.innerHeight),
- vx: Math.random() - 0.5,
- vy: Math.random() + 0.5,
- size: Math.random() * 3 + 1,
- color: "#FFF"
- })
- }
- function timeUpdate() {
- context.clearRect(0, 0, window.innerWidth, window.innerHeight); //清除画布区域
- var practicle;
- for (var i = 0; i < 500; i++) {
- var practicle = practicles[i];
- practicle.x += practicles[i].vx;
- practicle.y += practicles[i].vy;
- if (practicle.x < 0) {
- practicle.x = window.innerWidth
- }
- if (practicle.x > window.innerWidth) {
- practicle.x = 0
- }
- if (practicle.y > window.innerHeight) {
- practicle.y = 0
- }
- context.beginPath();
- context.arc(practicle.x, practicle.y, practicle.size, 0, Math.PI * 2) context.closePath();
- context.fillStyle = practicle.color;
- context.fill();
- }
- }
- setInterval(timeUpdate, 40);
- </script>
- </body>
- </html>
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持脚本之家!
来源: http://www.phperz.com/article/17/0723/327719.html