20000 points in random motion(20000个点自由移动)

来源:互联网 发布:mac怎么安装axure 编辑:程序博客网 时间:2024/06/05 02:35
预览效果:http://bl.ocks.org/syntagmatic/5107530
关键代码:
<canvas id="canvas"></canvas><script src="http://d3js.org/d3.v3.min.js"></script><script>var num = 20000;//point 数量
//canvas画布设置var canvas = document.getElementById("canvas");var width = canvas.width = 960;var height = canvas.height = 500;var ctx = canvas.getContext("2d");
//随机产生20000不同位置的pointvar particles = d3.range(num).map(function(i) {  return [Math.round(width*Math.random()), Math.round(height*Math.random())];}); 
//不断执行step()d3.timer(step);function step() {  ctx.fillStyle = "rgba(255,255,255,0.3)";  ctx.fillRect(0,0,width,height);  ctx.fillStyle = "rgba(0,0,0,0.5)";  particles.forEach(function(p) {    p[0] += Math.round(2*Math.random()-1);    p[1] += Math.round(2*Math.random()-1);    if (p[0] < 0) p[0] = width;    if (p[0] > width) p[0] = 0;    if (p[1] < 0) p[1] = height;    if (p[1] > height) p[1] = 0;    drawPoint(p);  });};function drawPoint(p) {  ctx.fillRect(p[0],p[1],1,1);};</script><style>html, body { margin: 0; padding: 0; }</style>
 
原创粉丝点击