css or canvas实现进度条

clipboard.png
求教这个用css或者canvas应该怎么实现

阅读 2.1k
1 个回答
<!DOCTYPE HTML>
<html>
<body>

<canvas id="myCanvas" width="300" height="100" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>

<script type="text/javascript">

var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
var totalWidth = 200;
var height = 50;

function draw(percentage) {
  var length = totalWidth * percentage;
  cxt.moveTo(10,10);
  cxt.lineTo(0,height );
  cxt.lineTo(length,height );
  cxt.lineTo(length+10,10);
  cxt.lineTo(10,10);
  cxt.fillStyle="read";
  cxt.fill();

  cxt.beginPath();
  cxt.moveTo(length,height );
  cxt.lineTo(totalWidth + 20 ,height );
  cxt.lineTo(totalWidth +10,10);
  cxt.lineTo(length + 10,10);
  cxt.lineTo(length+10,10);
  cxt.fillStyle="blue";
  cxt.fill();
}



draw(0.6)

</script>

</body>
</html>

然后进度条更新时传入percentage参数,清除画布,调用绘制方法重新绘制就好了

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题