for 循环内动画只执行最后一个

发布于
2017-02-19

刚学js
想让4个圆圈里的动画都动可是现在只动最后一个

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>多个canvas</title>
</head>
<style>
body{ background: #ccc; }
    *{margin:0 auto;}
    li{list-style:none;}
    .wrap{margin:20px auto; width:600px; margin:0 auto; }
    li{float: left; margin:10px}
</style>
<body> 

    <ul class="wrap">
        <li><canvas id="me-skill1"></canvas></li>
        <li><canvas id="me-skill2"></canvas></li>
        <li><canvas id="me-skill3"></canvas></li>
        <li><canvas id="me-skill4"></canvas></li>

    </ul>
<script src="http://static1.72byte.com/js/jquery.min.js"></script>
<script>
 var canvas = [
     document.getElementById('me-skill1'),
     document.getElementById('me-skill2'),
     document.getElementById('me-skill3'),
     document.getElementById('me-skill4'),
   ];
   //边框颜色组
   var canvasBg = ["#e16652","#36d394","#3ab0e2","#dfae47"];
   
   // 值
   var nowRange = 20;
   // 画布属性
   var mW = canvas.width = 110;//宽度
   var mH = canvas.height = 110;//高度
   var lineWidth = 2;
   
   //画圆心
   var r = mH / 2; //圆心
   var cR = r - 2*lineWidth ;

   //Sin 曲线属性
   var sX = 0;
   var sY = mH/2;
   var axisLength = mW; //轴长
   var waveWidth = 0.055 ; //波浪宽度,数越小越宽 
   var waveHeight = 5; //波浪高度,数越大越高
   var speed = 0.09; //波浪速度，数越大速度越快
   var xOffset = 0; //波浪x偏移量

   // 画圈函数
   var IsdrawCircled = false;


  //画sin 曲线函数
  var drawSin = function(xOffset){
  ctx.save();
  var points=[]; //用于存放绘制Sin曲线的点
  ctx.beginPath();
  //封闭路径
  //在整个轴长上取点
    for(var x = sX; x<axisLength; x += 20/axisLength){
     //此处坐标(x,y)的取点，依靠公式 “振幅高*sin(x*振幅宽 + 振幅偏移量)”
     var y = -Math.sin((sX+x) * waveWidth + xOffset);

     var dY = mH * (1 - nowRange/100);
     points.push([x, dY + y * waveHeight]);
     ctx.lineTo(x, dY + y * waveHeight); 
    }
    //封闭路径
     ctx.lineTo(axisLength, mH);
     ctx.lineTo(sX, mH);
     ctx.lineTo(points[0][0],points[0][1]);
     ctx.fillStyle = canvasBg[i];
     ctx.fill();
     ctx.restore();
 }


 var insctx = function(){
  //内实心情圈
  ctx.beginPath();
  ctx.arc(r,r,20,0,Math.PI*2);
  ctx.fillStyle = canvasBg[i];
  ctx.fill();
  ctx.restore();
}

   //文字
var insText = function(){
  ctx.save();
  ctx.fillStyle = "#fff";
  ctx.textAlign = "center";
  ctx.textBaseline = "middle";
  ctx.font = "12px Microsoft Yahei";
  ctx.fillText("50%", r, r);
  ctx.restore();
};
//动画
var render = function(){
   ctx.clearRect(0, 0, mW, mH);
   drawSin(xOffset);
   insctx();//执行内圆
   insText();//执行文字
   xOffset += .02;
   requestAnimationFrame(render);
  }
// 循环4个canvas
  for(var i = 0; i<canvas.length;i++){ 
     canvas[i].width = 110;
  canvas[i].height =110;
  var ctx=canvas[i].getContext("2d");
  ctx.beginPath();
    ctx.arc(r, r, cR+1, 0, Math.PI * 2);
    ctx.strokeStyle = canvasBg[i];
    ctx.lineWidth = lineWidth;
    ctx.stroke();//画空心圆
  ctx.beginPath();
  ctx.arc(r, r, cR, 0, 2 * Math.PI);
    ctx.clip();

  insctx();//执行文字
  insText(); //执行内圆
  drawSin(xOffset);//执行波浪
  render()//执行动画
}

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

大神帮我看看？

canvas

阅读 4.3k

2 个回答

得票最新

PengJiyuan

5146

发布于
2017-02-20

看你的ctx到底是哪一个环境？应该是ctx的问题，被覆盖了。最好把ctx当作一个参数传到绘制方法中。

Robee

发布于
2017-07-18

新手上路，请多包涵

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>多个canvas</title>
</head>
<style>
body{ background: #ccc; }
    *{margin:0 auto;}
    li{list-style:none;}
    .wrap{margin:20px auto; width:600px; margin:0 auto; }
    li{float: left; margin:10px}
</style>
<body> 
<ul class="wrap">
    <li><canvas NowRange="80"></canvas></li>
    <li><canvas NowRange="30"></canvas></li>
    <li><canvas NowRange="40"></canvas></li>
    <li><canvas NowRange="50"></canvas></li>
    <li><canvas NowRange="60"></canvas></li>
    <li><canvas NowRange="70"></canvas></li>
</ul>
<script src="http://static1.72byte.com/js/jquery.min.js"></script>
<script>
$(function(){
    $(".wrap li").each(function(key){
        // 定义canvasID
        $(this).children().attr("id","me-skill"+key)
        // 获取canvasID
        var CanvasAttrId = $(this).children().attr("id")
        // 获取进度
        var NowRange = $(this).children().attr("NowRange")
        //边框颜色组
        var canvasBg = ["#dfae47"];
        var CanvasId = [
                document.getElementById(CanvasAttrId)
            ]
        
        // 画布属性
        var mW = CanvasId.width = 110;//宽度
        var mH = CanvasId.height = 110;//高度
        var lineWidth = 2;
        //画圆心
        var r = mH / 2; //圆心
        var cR = r - 2*lineWidth;
        
        //Sin 曲线属性
        var sX = 0;
        var sY = mH/2;
        var axisLength = mW; //轴长
        var waveWidth = 0.055 ; //波浪宽度,数越小越宽 
        var waveHeight = 5; //波浪高度,数越大越高
        var speed = 0.09; //波浪速度，数越大速度越快
        var xOffset = 0; //波浪x偏移量

        // 画圈函数
        var IsdrawCircled = false;
        
        //画sin 曲线函数
        var drawSin = function(xOffset){
            ctx.save();
            var points=[]; //用于存放绘制Sin曲线的点
            ctx.beginPath();
            //封闭路径
            //在整个轴长上取点
            for(var x = sX; x<axisLength; x += 20/axisLength){
             //此处坐标(x,y)的取点，依靠公式 “振幅高*sin(x*振幅宽 + 振幅偏移量)”
            var y = -Math.sin((sX+x) * waveWidth + xOffset);

            var dY = mH * (1 - NowRange/100);
            points.push([x, dY + y * waveHeight]);
            ctx.lineTo(x, dY + y * waveHeight); 
            }
            //封闭路径
            ctx.lineTo(axisLength, mH);
            ctx.lineTo(sX, mH);
            ctx.lineTo(points[0][0],points[0][1]);
            ctx.fillStyle = canvasBg[i];
            ctx.fill();
            ctx.restore();
         }
        var insctx = function(){
            //内实心圈
            ctx.beginPath();
            ctx.arc(r,r,20,0,Math.PI*2);
            ctx.fillStyle = canvasBg[i];
        }
         //文字
        var insText = function(){
            ctx.save();
            ctx.fillStyle = "#fff";
            ctx.textAlign = "center";
            ctx.textBaseline = "middle";
            ctx.font = "12px Microsoft Yahei";
            ctx.fillText(NowRange + "%", r, r);
            ctx.restore();
        };
        
        //动画
        var render = function(){
            ctx.clearRect(0, 0, mW, mH);
            drawSin(xOffset);
            insctx();//执行内圆
            insText();//执行文字
            xOffset += .02;
            requestAnimationFrame(render);
        }
        
        // 循环4个canvas
        for(var i = 0; i<CanvasId.length;i++){ 
            CanvasId[i].width = mW;
            CanvasId[i].height =mH;
            var ctx=CanvasId[i].getContext("2d");
            ctx.beginPath();
            ctx.arc(r, r, cR+1, 0, Math.PI * 2);
            ctx.strokeStyle = canvasBg[i];
            ctx.lineWidth = lineWidth;
            ctx.stroke();//画空心圆
            ctx.beginPath();
            ctx.arc(r, r, cR, 0, 2 * Math.PI);
            ctx.clip();
            
            insText(); //执行文字
            drawSin(xOffset);//执行波浪
            render()//执行动画
        }
    })
})
</script>
</body>
</html>

请输入代码

撰写回答

你尚未登录，登录后可以

和开发者交流问题的细节
关注并接收问题和回答的更新提醒
参与内容的编辑和改进，让解决方法与时俱进

推荐问题

web端如何突破浏览器性能瓶颈？
背景：目前项目（后台管理系统）使用vue2.x开发，大概已经4年左右了，绝大部分功能是没什么性能问题的，也就是说不会卡顿，但是项目中未来需要开发一些功能，类似：“博思白板”这类的思维导图，还有一些数据量比较大的甘特图，不同柱状之间有连接线，目前有两套方案（Flutter、Electron），
4 回答1.6k 阅读

for 循环内动画只执行最后一个

你尚未登录，登录后可以

web端如何突破浏览器性能瓶颈？