<!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参数,清除画布,调用绘制方法重新绘制就好了
然后进度条更新时传入percentage参数,清除画布,调用绘制方法重新绘制就好了