canvas 学习过程中的小例子, 以后可以用在登录或者其他页面中做背景使用, 感觉还是不错的
html 代码
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="UTF-8">
- <title>
雨滴
- </title>
- <style type="text/CSS">
- *{ margin: 0; padding: 0; border: 0; } #can{ background-color: #000; display:
- block; }
- </style>
- </head>
- <body>
- <canvas id="can">
- </canvas>
- <script type="text/javascript">
- var can = document.getElementById('can'); // 获取画布元素
- var ctx = can.getContext('2d'); // 调用画布的平面 API 接口
- var w = can.width = window.innerWidth; // 定义全屏画布的宽
- var h = can.height = window.innerHeight; // 定义全屏画布的高
- window.onresize = function() { // 实时监听浏览器窗口
- w = can.width = window.innerWidth; // 画布动态改变宽
- h = can.height = window.innerHeight; // 画布动态改变高
- };
- function random(min, max) { // 封装生成指定范围随机数
- return (max - min) * Math.random() + min;
- }
- /* 把雨滴当中一个对象, 开始面向对象编程 */
- function Drop() {} // 创建自定义雨滴对象
- Drop.prototype = { // 给雨滴的原型添加自定义方法
- /* 雨滴初始化方法 */
- init: function() {
- this.x = random(0, w); // 雨滴 x 坐标窗口 w 范围内随机产生
- this.y = 0; // 雨滴 y 坐标初始为零
- this.vy = random(4, 7); // 雨滴下落速度指定范围内随机
- this.r = 1; // 波纹初始半径
- this.vr = 1; // 波纹扩大速度
- this.a = 1; // 波纹初始透明度
- this.va = 0.93; // 波纹扩散透明系数
- this.maxH = random(h * 0.78, h * 0.9); // 下落高度随机范围
- },
- /* 雨滴绘制方法 */
- draw: function() {
- if (this.y> this.maxH) { // 绘制波纹
- ctx.beginPath(); // 开始路径(抬笔)
- ctx.arc(this.x, this.y, this.r, 0, Math.PI * 2, true);
- // 绘制波纹
- ctx.strokeStyle = 'rgba(0,255,255,' + this.a + ')';
- // 用 rgba 带透明度的颜色(透明度是动态属性)
- ctx.stroke(); // 绘制波纹
- } else {
- ctx.fillStyle = '#0ff'; // 绘制雨滴
- ctx.fillRect(this.x, this.y, 2, 10); // 根据动态属性绘制
- }
- this.update(); // 每次绘制结束, 调用下更新方法
- },
- /* 雨滴更新方法 */
- update: function() {
- if (this.y <this.maxH) { // 如果雨滴小于最大下落高度
- this.y += this.vy; // 那就继续下落
- } else { // 如果雨滴达到最大下落高度
- /* 停止下落并开始绘制波纹 */
- if (this.a>= 0.03) { // 如果波纹透明度不低于 0.03(还看得见)
- this.a *= this.va; // 就继续减小透明度
- if (this.r <50) { // 如果波纹半径小于 50
- this.r += this.vr; // 就继续扩大波纹的半径
- }
- } else { // 如果波纹已经看不见了
- this.init(); // 那就重新初始化该雨滴对象
- }
- }
- }
- };
- /* 以上是面向对象编程 */
- /* 以下是面向过程编程 */
- var drops = []; // 创建雨滴对象数组(容器)
- for (var i = 0; i < 300; i++) { // 一次性创建 300 个雨滴对象
- (function(j) { // 为了能够延迟创建雨滴, 采用闭包的方式
- setTimeout(function() { // 开启延迟计时器
- var drop = new Drop(); // 实例化雨滴
- drop.init(); // 初始化雨滴
- drops.push(drop); // 把初始化的雨滴压倒数组(容器)
- },
- j * 200); // 每个雨滴延迟 200 毫秒生成
- // console.log(j);
- })(i); // 这样的目的可以实现开始小于, 越下越大
- }
- function move() { // 雨滴下落过程
- // ctx.clearRect(0,0,w,h); // 采用清除画布达不到预期的效果
- ctx.fillStyle = 'rgba(0,0,0,0.1)'; // 采用绘制透明层的方法可以很好的达到预期的效果
- ctx.fillRect(0, 0, w, h); // 绘制全屏透明层
- for (var i = 0; i < drops.length; i++) {
- drops[i].draw(); // 再透明层上绘制雨滴(调用雨滴绘制方法)
- }
- }
- setInterval(move, 35); // 每 35 毫秒更新一次雨滴 (波纹) 的位置
- </script>
- </body>
- </html>
来源: http://www.qdfuns.com/article/42235/772f697a50e648222bcb6f9d4cce2d29.html