Article From:https://segmentfault.com/q/1010000011709383
Question:


How should we use CSS or canvas?

Answer 0:
<!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>

Then when the progress bar is updated, the percentage parameter is passed in, the canvas is cleared, and the drawing method is called to redraw.

Similar Posts:

Leave a Reply

Your email address will not be published. Required fields are marked *