html5 canvas绘制圆形进度实例
2019獨角獸企業(yè)重金招聘Python工程師標準>>>
html5 canvas繪制圓形進度實例
<canvas id="test" width=200 height=200></canvas>
?
<script>
? ? var canvas2d = document.getElementById("test").getContext("2d");
? ? var deg = 0;
? ? var test = function(deg){
? ? ? ? var r = deg*Math.PI/180; ? //canvas繪制圓形進度
? ? ? ? canvas2d.clearRect(0,0,200,200); ??//先清理
? ? ? ? canvas2d.beginPath();??//路徑開始
? ? ? ? //canvas2d.fillStyle = "#fff";?//填充顏色
? ? ? ? canvas2d.strokeStyle = "#dddddd"; //canvas邊框顏色
? ? ? ? canvas2d.lineWidth = 6; //線寬
? ? ? ? canvas2d.arc(100,100,50,0-90*Math.PI/180,r-90*Math.PI/180,false);?//canvas繪制弧形
? ? ? ? //canvas2d.fill();
? ? ? ? canvas2d.stroke();
? ? ? ? //canvas2d.closePath();
? ? };
//使用定時器讓html5 canvas繪制圓形進度動起來
? ? var t = setInterval(function(){
? ? ? ? deg+=10;
? ? ? ? test(deg);
? ? ? ? if(deg>360){
? ? ? ? ? ? clearInterval(t);
? ? ? ? }
? ? ? ? console.log(deg);
? ? },20);
轉(zhuǎn)載于:https://my.oschina.net/zhouhang0907/blog/541985
《新程序員》:云原生和全面數(shù)字化實踐50位技術(shù)專家共同創(chuàng)作,文字、視頻、音頻交互閱讀總結(jié)
以上是生活随笔為你收集整理的html5 canvas绘制圆形进度实例的全部內(nèi)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 正则效率,\w误区
- 下一篇: 在PostgreSQL命令行psql里格