canvas+js實現圓圈進度條

最後更新：2013-12-28 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

學習筆記：

canvas 擁有多種繪製路徑、矩形、圓形、字元以及添加映像的方法。canvas 元素本身是沒有繪圖能力的,可以看成一個畫圖的容器。所有的繪製工作必須在 JavaScript 內部完成：getContext("2d") 對象是內建的 HTML5 對象，擁有多種繪製路徑、矩形、圓形、字元以及添加映像的方法.

1.canvas畫圖流程

var c=document.getElementById("myCanvas");var cxt=c.getContext("2d");cxt.fillStyle="#FF0000";cxt.beginPath();cxt.arc(70,18,15,0,Math.PI*2,true);cxt.closePath();cxt.fill();

2.canvas圓圈函數的具體解釋

畫圓，Math.PI 函數的應用。cxt.arc(100,100,30,0,Math.PI*2,true); 括弧內第一個和第二個參數，代表圓心座標。第三個參數是圓的半徑。第四個參數代表圓周起始位置。0 PI就是起始位置。沿順時針路線，分別是0.5 PI(正下方)，1 PI和1.5 PI(正上方)，為畫餅圖提供了扇形範圍的依據。第五個參數是弧長Math.PI*2就是整個圓，Math.PI是半圓。第六個參數是一個布爾值，true是逆時針false是順時針。】

文法：arc(定義一個中心點，半徑，起始角度，結束角度，和繪圖方向：順時針或逆時針)

關於角度問題：水平靠右是0,0.5PI是向下90度正下方），-0.5PI是向上90度正上方）。圓的成形並不是以弧長為計算，而是以起始的角度和終止角度之間的連線為計算。

3.Math.round()

round()方法你可以這樣理解：就是括弧內的數+0.5之後，向下取值，比如：round(3.4)就是3.4+0.5=3.9，向下取值是3，所以round(3.4)=3; 那麼round(-10.5)就是-10.5+0.5=-10，向下取值就是-10，所以round(-10.5)=-10

4.stroke）函數

ctx.stroke();繪製函數並顯示出來

JavaScript Math.ceil() 函數 -- 返回大於等於數字參數的最小整數(取整函數)，對數字進行上舍入

JavaScript Math.floor() 函數 -- 返回小於等於數字參數的最大整數(取整函數)，對數字進行上舍入

原始碼如下：

<!doctype html>

<html>

<head>

body{

background:#333;

}

#canvas{

display:block;

width:300px;

margin:100px auto;

}

</style>

window.onload=function(){

//canvas init

var canvas=document.getElementById("canvas");

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

var W=canvas.width;

var H=canvas.height;

//variables

var degrees=0;

var new_degrees=0;

var diff=0;

var color="lightgreen";

var bgcolor="#222";

var text;

var animation_loop,redraw_loop;

function init(){

//clean the canvas everytime a chart is drawn

ctx.clearRect(0,0,W,H);

//background 360 degree arc

ctx.beginPath();

ctx.strokeStyle=bgcolor;

ctx.lineWidth=30;

ctx.arc(W/2,H/2,100,0,Math.PI*2,false);

ctx.stroke();

//Math.PI=180du

var radians=degrees*Math.PI/180;

ctx.beginPath();

ctx.strokeStyle=color;

ctx.lineWidth=30;

ctx.arc(W/2,H/2,100,0-90*Math.PI/180,radians-Math.PI/180,false);//整個圓是2PI

ctx.stroke();

//let us add text

ctx.fillStyle=color;

ctx.font="50px bebas";

text=Math.floor(degrees/360*100)+"%";

text_width=ctx.measureText(text).width;

ctx.fillText(text,W/2-text_width/2,H/2+15);

}

function draw()

{

if(typeof animation_loop!=undefined)

clearInterval(animation_loop);

new_degrees=Math.round(Math.random()*360);

var diff=new_degrees-degrees;

animation_loop=setInterval(animate_to,1000/diff);

}

//animation for fun

function animate_to()

{

if(degrees<new_degrees)

degrees++;

else

degrees--;

if(degrees==new_degrees)

clearInterval(animation_loop);

init();

}

draw();

redraw_loop=setInterval(draw,2000);

}

</script>

</head>

<body>

</body>

</html>

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More