首页 > 代码库 > HTML - 动画Demo
HTML - 动画Demo
1 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title></title> 6 <style> 7 * { 8 margin: 0; 9 padding: 0; 10 } 11 12 html, body { 13 width: 100%; 14 height: 100%; 15 overflow: hidden; 16 } 17 </style> 18 </head> 19 <body> 20 <canvas id="canvas" style="width:100%;height:100%"></canvas> 21 <!--<script> 22 // 先拿到canvas 的 Dom对象 23 var canvas = document.getElementById(‘canvas‘); 24 canvas.width = canvas.clientWidth; 25 canvas.height = canvas.clientHeight; 26 // 拿到绘图上下文对象 27 var context = canvas.getContext(‘2d‘); 28 //// 通过上下文中的API进行绘制操作 29 //context.moveTo(50, 100); // 设置画笔的状态 30 //context.lineTo(100, 100); 31 ////context.strokeStyle = ‘red‘; // 只是设置状态 32 ////context.stroke(); 33 //context.lineTo(100, 50); 34 //context.lineTo(50, 50); 35 //context.lineTo(50, 100); 36 //context.strokeStyle = ‘yellow‘; 37 //// 着手去画 38 //context.stroke(); 39 40 //context.moveTo(150, 100); 41 //context.lineTo(150, 150); 42 //context.stroke(); 43 44 ////第三步：指定绘制线样式、颜色 45 //context.strokeStyle = "red"; 46 ////第四步：绘制矩形 47 //context.strokeRect(10, 10, 100, 100); 48 49 ////以下演示填充矩形 50 //context.strokeStyle = "red"; 51 //context.fillStyle = "blue"; 52 //context.fillRect(110, 110, 100, 100); 53 54 //context.moveTo(50, 100); // 设置画笔的状态 55 //context.lineTo(100, 100); 56 ////context.strokeStyle = ‘red‘; // 只是设置状态 57 ////context.stroke(); 58 //context.lineTo(100, 50); 59 //context.lineTo(50, 50); 60 ////context.lineTo(50, 100); 61 //context.lineWidth = 5; 62 //context.strokeStyle = ‘yellow‘; 63 //context.fillStyle = "blue"; 64 //context.stroke(); 65 //context.fill(); 66 //console.log(2 * Math.PI); 67 context.arc(150, 150, 100, 0, 2 * Math.PI, true); 68 context.stroke(); 69 </script>--> 70 <script> 71 var frameRate = 30; 72 var increment = 0.5; 73 var max = 5; 74 var min = 1; 75 76 // 先拿到canvas 的 Dom对象 77 var canvas = document.getElementById(‘canvas‘); 78 canvas.width = canvas.clientWidth; 79 canvas.height = canvas.clientHeight; 80 canvas.style.backgroundColor = ‘#444349‘; 81 // 拿到绘图上下文对象 82 var context = canvas.getContext(‘2d‘); 83 84 85 var dots = []; 86 for (var i = getRangeRandom(200, 300) ; i >= 0 ; i--) { 87 var color; 88 switch (i % 5) { 89 case 0: 90 color = "#C2F012"; 91 break; 92 case 1: 93 color = "#87F2D4"; 94 break; 95 case 2: 96 color = "#C1E6E2"; 97 break; 98 case 3: 99 color = "#C2CDCF";100 break;101 case 4:102 color = "#679EB8";103 break;104 }105 var r = getRangeRandom(min, max);106 var dot = {107 position: { x: getRangeRandom(0, canvas.width), y: getRangeRandom(0, canvas.height) },108 velocity: { x: 0, y: 0 },109 style: color,110 radius: r,111 increase: r < max / 2112 }113 dots.push(dot);114 }115 116 function update() {117 each(function (i, item) {118 // 闪烁119 if (item.increase) {120 item.radius += increment;121 if (item.radius > max) {122 item.increase = false;123 }124 } else {125 item.radius -= increment;126 if (item.radius < min) {127 item.increase = true;128 }129 }130 // 移动131 //item.position.x += dots[i].velocity.x;132 //item.position.y += dots[i].velocity.y;133 //item.velocity.y += 1;134 //if (item.position.y >= canvas.height - item.radius) {135 // item.position.y = canvas.height - item.radius;136 // item.velocity.y = -item.velocity.y * 0.5;137 //} else if (item.position.y <= item.radius) {138 // item.position.y = item.radius;139 // item.velocity.y = -item.velocity.y*0.5;140 //}141 //if (item.position.x >= canvas.width - item.radius) {142 // item.position.x = canvas.width - item.radius;143 // item.velocity.x = -item.velocity.x * 0.5;144 //} else if (item.position.x <= item.radius) {145 // item.position.x = item.radius;146 // item.velocity.x = -item.velocity.x * 0.5;147 //}148 });149 }150 151 function render() {152 context.clearRect(0, 0, canvas.width, canvas.height);153 each(function (i, item) {154 context.fillStyle = item.style;155 context.beginPath();156 context.arc(item.position.x, item.position.y, item.radius, 0, 2 * Math.PI);157 context.closePath();158 context.fill();159 });160 }161 162 function each(func) {163 for (var i = 0; i < dots.length; i++) {164 func(i, dots[i]);165 }166 }167 168 setInterval(function () {169 update();170 render();171 }, 1000 / frameRate);172 173 174 //// 先拿到canvas 的 Dom对象175 //var canvas = document.getElementById(‘canvas‘);176 //canvas.width = canvas.clientWidth;177 //canvas.height = canvas.clientHeight;178 //canvas.style.backgroundColor = ‘#444349‘;179 //// 拿到绘图上下文对象180 //var context = canvas.getContext(‘2d‘);181 //for (var i = getRangeRandom(200, 500) ; i >= 0 ; i--) {182 // var r = parseInt(Math.random() * (10 - 1) + 1);183 // switch (i % 5) {184 // case 0:185 // context.fillStyle = "#C2F012";186 // break;187 // case 1:188 // context.fillStyle = "#87F2D4";189 // break;190 // case 2:191 // context.fillStyle = "#C1E6E2";192 // break;193 // case 3:194 // context.fillStyle = "#C2CDCF";195 // break;196 // case 4:197 // context.fillStyle = "#679EB8";198 // break;199 // }200 // context.beginPath();201 // context.arc(getRangeRandom(0, canvas.width), getRangeRandom(0, canvas.height), r, 0, 2 * Math.PI);202 // context.closePath();203 // context.fill();204 //}205 206 207 function getRangeRandom(min, max) {208 return parseInt(Math.random() * (max - min) + min);209 }210 </script>211 </body>212 </html>
HTML - 动画Demo
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。