js中如何利用for循环及setInterval来逐个操作一个数组中的对象？

MrBin1994 2017-02-15 11:45:02

想用canvas画一个统计图，用定时器设置高度慢慢增加的动画效果，逻辑上好像不太对，大概意思就是逐个对数组中的对象逐个改变实现动画，用for循环和setInterval 怎么实现？

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
body {
text-align: center;
}

#c2 {
background: #f0f0f0;
}
</style>
</head>
<body>

<canvas id="c2"></canvas>
<h1>Canvas绘制统计图</h1>
<script src="js/jquery-1.11.3.js"></script>
<script>
//var ctx = $('#c2').getContext('2d');
//var ctx = $('#c2')[0].getContext('2d');
var w = 800; //画布的宽
var h = 600; //画布的高
c2.width = w;
c2.height = h;

var ctx = c2.getContext('2d');

//绘制边框轮廓
ctx.strokeRect(50, 50, w - 100, h - 100);

var list = [
{label: 1, value: 300},
{label: 2, value: 400},
{label: 3, value: 200},
{label: 4, value: 490},
{label: 5, value: 350},
{label: 6, value: 450}
];
//每次更新的高度
var rh1 = 0;
var count = list.length;
//每个柱子的宽度
var colWidth = (w - 100) / (2 * count + 1);
//遍历list数据，绘制每个柱子

for (var i = 0; i < list.length; i++) {
var data = list[i]; //每个数据
var rw = colWidth; //矩形的宽
var rh = data.value; //矩形的高
var x = (2 * i + 1) * colWidth + 50;
var y = h - rh - 50;

// ctx.strokeRect(x, y, rw, rh);
// ctx.fillStyle = 'red';
// ctx.fillRect(x, y, rw, rh);

var timer = setInterval(function () {
//清画布
//ctx.clearRect(0, 0, 800, 600);
rh1 += 5;
ctx.strokeRect(x, y, rw, rh1);
ctx.fillStyle = 'red';
ctx.fillRect(x, y, rw, rh1);
}, 50);
if (rh1 == rh) {
clearInterval(timer);
}
}

</script>
</body>
</html>

...全文

614 3 打赏收藏转发到动态举报

写回复

用AI写文章

3 条回复

切换为时间正序

请发表友善的回复…

发表回复

当作看不见 2017-02-15

打赏
举报

把你画图的操作封装为一个函数，函数的参数为高度，然后定时器定时执行函数，传入参数就可以了。你写的这个思路有些不对

天际的海浪 2017-02-15

打赏
举报


<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title></title>
  <style>
    body {
      text-align: center;
    }

    #c2 {
      background: #f0f0f0;
    }
  </style>
</head>
<body>

<canvas id="c2"></canvas>
<h1>Canvas绘制统计图</h1>
<script>
  var c2 = document.getElementById("c2");
  var w = 800;    //画布的宽
  var h = 600;    //画布的高
  c2.width = w;
  c2.height = h;

  var ctx = c2.getContext('2d');

  //绘制边框轮廓
  ctx.strokeRect(50, 50, w - 100, h - 100);

  var list = [
    {label: 1, value: 300},
    {label: 2, value: 400},
    {label: 3, value: 200},
    {label: 4, value: 490},
    {label: 5, value: 350},
    {label: 6, value: 450}
  ];
  //每次更新的高度
  var count = list.length;
  //每个柱子的宽度
  var colWidth = (w - 100) / (2 * count + 1);
  //遍历list数据，绘制每个柱子


  for (var i = 0; i < list.length; i++) {
  (function (i) {
    var rh1 = 0;
    var data = list[i]; //每个数据
    var rw = colWidth; //矩形的宽
    var rh = data.value; //矩形的高
    var x = (2 * i + 1) * colWidth + 50;
    var y = h - rh - 50;

//      ctx.strokeRect(x, y, rw, rh);
//      ctx.fillStyle = 'red';
//      ctx.fillRect(x, y, rw, rh);

    var timer = setInterval(function () {
      //清画布
      //ctx.clearRect(0, 0, 800, 600);
      rh1 += 5;
      ctx.strokeRect(x, y, rw, rh1);
      ctx.fillStyle = 'red';
      ctx.fillRect(x, y, rw, rh1);
      if (rh1 == rh) {
        clearInterval(timer);
      }
    }, 50);
  })(i);
  }
  


</script>
</body>
</html>

MrBin1994 2017-02-15