Canvas + js implement circle progress bar

Last Update:2013-12-28 Source: Internet

Author: User

Tags rounds

Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

Study Notes:

Canvas has multiple ways to draw paths, rectangles, circles, characters, and add images. The canvas element itself has no drawing capability and can be considered as a drawing container. All the painting work must be completed within JavaScript: getContext ("2d") objects are built-in HTML5 objects, with multiple painting paths, rectangles, circles, characters, and image adding methods.

1. canvas Painting Process

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. Details about the canvas circle function

Circle, the application of Math. PI function. Cxt. arc (100,100, 0, Math. PI * 2, true); the first and second parameters in parentheses represent the coordinates of the center. The third parameter is the circle radius. The fourth parameter indicates the start position of the circumference. 0 PI is the starting position. Along the clockwise route, there are 0.5 PI (bottom), 1 PI and 1.5 PI (top), providing the basis for the pie chart. The fifth parameter is the arc length Math. PI * 2 is the entire circle, and Math. PI is the semi-circle. The sixth parameter is a Boolean value, and true is counterclockwise. false is clockwise .]

Syntax: arc (defines a center point, radius, start angle, end angle, and drawing direction: clockwise or counterclockwise)

Angle problem: the horizontal direction is 0 to the right, the 0.5PI is down 90 degrees below), and the-0.5PI is up 90 degrees above ). The forming of a circle is not based on the arc length, but on the line between the starting angle and ending angle.

3. Math. round ()

You can understand the round () method as follows: after the number in the brackets is + 0.5, the value is down. For example, the value of round (3.4) is 3.4 + 0.5 = 3.9, and the value is 3, so round (3.4) = 3; then round (-10.5) is-10.5 + 0.5 =-10, and the downward value is-10, so round (-10.5) =-10

4. stroke) Function

Ctx. stroke (); Draw and display the Function

JavaScript Math. ceil () function -- returns the smallest integer greater than or equal to the number parameter (the entire function) and rounds up the number

JavaScript Math. floor () function -- returns the maximum integer (integer) that is less than or equal to the number parameter and rounds up the number.

The source code is as follows:

<! 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); // the entire circle is 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. rank () * 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>

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

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