<title>H5实现进度条循环渐变</title> 

</head>

<body>

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;"></canvas>

<script></p><p>var c=document.getElementById("myCanvas");

var ctx=c.getContext("2d");

var intervalid;

var i = 0;

intervalid = setInterval("fun()", 100);

function fun() {

if (i == 100) {

i=0;

}

if(i > 50)

{

var x = 10*i;

}else{

var x = 4*i;

}

var grd=ctx.createLinearGradient(0,0,x,0);

grd.addColorStop(0,"red");

grd.addColorStop(1,"white");

ctx.fillStyle=grd;

ctx.fillRect(10,10,150,20);

i++;

}

</script>

</body>

</html>"/>

H5实现进度条循环渐变

发表时间：2018-07-17 00:19:01点击：1196
*原创文章，转载请注明出处

上一篇:fmt:formatDate 标签设置12小时制和24小时制

下一篇:SHA256加密方法