2019獨角獸企業重金招聘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);

轉載于:https://my.oschina.net/zhouhang0907/blog/541985

《新程序員》：云原生和全面數字化實踐50位技術專家共同創作，文字、視頻、音頻交互閱讀

總結

以上是生活随笔為你收集整理的html5 canvas绘制圆形进度实例的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。