HTML5之canvas之粒子效果

来源:转载

效果图:JavaScript 代码实现:

<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title></title> <style> *{margin:0;padding:0;} html,body{width:100%:height:100%;overflow:hidden;} </style></head><body><canvas width="1280" height="910" ></canvas><script>var body = document.body;var canvasObj = document.getElementById("c1");var canvas2d = canvasObj.getContext("2d");var arr = [];var count = 300;var mouse = {};document.onmousemove = function(evt) { var e = evt || window.event; mouse = { xx: e.clientX, yy: e.clientY }}document.onmouseleave = function() { mouse = undefined;}document.oncontextmenu = function() { return false;}function ty() { canvas2d.clearRect(0, 0, canvasObj.width, canvasObj.height); for (var i = 0; i < count; i++) { if (arr.length != count) { p = { x: Math.floor(Math.random() * body.clientWidth), y: Math.floor(Math.random() * body.clientHeight), vx: 1 - Math.random() * 2, vy: 1 - Math.random() * 2, num: 0 } } else { p = hua(arr[i]); } canvas2d.fillStyle = "deepskyblue"; canvas2d.fillRect(p.x, p.y, 2, 2); arr[i] = p; } jiance(mouse);}setInterval(ty, 10);function hua(p) { var a = p; if (p.x <= 0 || p.x >= canvasObj.width) { a.vx = -p.vx; a.x += a.vx; } else if (p.y <= 0 || p.y >= canvasObj.height) { a.vy = -a.vy; a.y += a.vy; } else { a = { x: a.x + a.vx, y: a.y + a.vy, vx: a.vx, vy: a.vy, num: 0 } } return a;}function jiance(mouse) { for (var i = 0; i < arr.length; i++) { for (var j = 0; j < arr.length; j++) { if (i != j) { var len = Math.round(arr[i].x - arr[j].x) * Math.round(arr[i].x - arr[j].x) + Math.round(arr[i].y - arr[j].y) * Math.round(arr[i].y - arr[j].y) if (len <= 5000 && arr[i].num < 6) { arr[i].num++; canvas2d.lineWidth = 0.5 - len / 2000; canvas2d.beginPath(); canvas2d.strokeStyle = "lime"; canvas2d.moveTo(arr[i].x + 2, arr[i].y + 2); canvas2d.lineTo(arr[j].x, arr[j].y); canvas2d.stroke(); } } } if (mouse) { var leng = Math.round(arr[i].x - mouse.xx) * Math.round(arr[i].x - mouse.xx) + Math.round(arr[i].y - mouse.yy) * Math.round(arr[i].y - mouse.yy); if (leng > 5000 && leng <= 20000) { arr[i].x = arr[i].x + (mouse.xx - arr[i].x) / 20; arr[i].y = arr[i].y + (mouse.yy - arr[i].y) / 20; } if (leng <= 20000) { canvas2d.lineWidth = 1; canvas2d.strokeStyle = "yellow"; canvas2d.beginPath(); canvas2d.moveTo(arr[i].x, arr[i].y); canvas2d.lineTo(mouse.xx, mouse.yy); canvas2d.stroke(); } } }}console.log("application is running!");</script></body></html>
- 大小: 101.7 KB

分享给朋友:
您可能感兴趣的文章:
随机阅读: