Rotate javascript circular canvas

Question

Rotate javascript circular canvas

I'm having trouble spinning a circle with an HTML5 canvas. I create a circle that performs the function of loading. Right now, the boot part (green color) starts at 45 degrees. I can’t figure out how to get this portion to start at 0 degrees. Any help would be greatly appreciated.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>guage</title>
  </head>
  <body>
    <canvas id="canvas" width="300" height="300"></canvas>
    <p>Your browser does not support canvas.</p>
    <script src="http://127.0.0.1:3000/guage.js" charset="utf-8"></script>
  </body>
</html>

And for Javascript:

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

//background color
ctx.fillStyle = "rgb(52, 70, 105)";
ctx.fillRect(0, 0, canvas.height, canvas.width);

//drawing circle
ctx.beginPath();
ctx.lineWidth = "20";
ctx.strokeStyle = "rgb(66, 70, 67)";
ctx.arc(150,125, 75, 0, 2 * Math.PI);
ctx.stroke();

//generate random number between 0.01 and 1.99 since
//fill of circle is created with respect to radians.
var precision = 3;
var rando = parseFloat(Math.min(0.01 + (Math.random() * (1.99 - 0.01)),1.99).toFixed(2));
//calculate percent for display in center.
var percent = Math.round((rando * 500) / 10);

//Create fill for circle
var angle = 90 * (Math.PI / 180);
ctx.beginPath();
ctx.lineWidth = "20";
ctx.strokeStyle = "rgb(24, 242, 92)";
ctx.arc(150,125, 75, 0, rando * Math.PI);
ctx.stroke();


//Create percent in middle of circle
ctx.font = "20px Verdana";
ctx.fillStyle = "rgb(24, 242, 92)";
ctx.fillText(percent +"%", 135, 135);

Here's a screenshot of the exit in the browser: Is there a way to rotate the circle back 45 degrees? Or do any of you have an alternative assumption that I completely neglected the attempt in this example?

Thanks in advance!

+4

javascript html5 canvas

ferris.91 Dec 7 '16 at 0:48

source share

2 answers

Jordan S · Answer 1 · 2016-12-07T00:54:07+0000

, . .arc() . -Math.PI/2, .

//Create fill for circle
var angle = 90 * (Math.PI / 180);
ctx.beginPath();
ctx.lineWidth = "20";
ctx.strokeStyle = "rgb(24, 242, 92)";
ctx.arc(150,125, 75, -Math.PI/2, rando * Math.PI); // The fourth argument here
ctx.stroke();

https://jsfiddle.net/3oknq4km/1/ . ( 75%, )

Blindman67 · Answer 2 · 2016-12-07T04:05:56+0000

.

, .

min, max . dial.start . 12oclock (-1/2 ). dial.setValue(value), . . dial.setRenderContext(context2D). , .

.. .

// math constants
const MPI = Math.PI;
const MPI2 = Math.PI * 2;

// dial
var dial = {
    start : -MPI / 2,  // starting pos.
    min : 0,        // min value
    max : 100,      // max value
    value : 0,      // current value
    width : 20,
    innerWidth : 16,
    back : "gray",
    color : "#7F3",
    font : "62px arial",
    textCol : "gray",
    ctx : null,
    rendering : false, // flag to indicate that rendering is due
    setRenderContext : function(context){
        this.ctx = context;
        this.draw = this.draw.bind(this); // bind draw function to thi
    },
    setValue : function(val){  // function to set value
        this.value = Math.min(this.max,Math.max(this.min,val));
        if(!this.rendering){
            this.rendering = true;
            requestAnimationFrame(this.draw);
        }
    },
    draw : function drawDial(){ // function to draw dial
        this.rendering = false;
        if(this.ctx === null){  // no context so don't render
            return;
        }
        const ctx = this.ctx;
        const w = ctx.canvas.width;
        const h = ctx.canvas.height;
        var r = Math.min(w, h) / 2; // get readius
        const cw = w / 2;
        const ch = h / 2;
        ctx.clearRect(0,0,w,h); // clear the dial

        // render the dial backing circle
        ctx.fillStyle = this.back;
        ctx.beginPath();
        ctx.arc(cw, ch, r, 0, MPI2);
        ctx.arc(cw, ch, r - this.width, 0, MPI2, true); // Draw inner circle in reverse
        ctx.fill();

        // Get the dial position and percentage values            
        var ang = (this.value - this.min) / (this.max-this.min);
        var percent = (ang * 100).toFixed(0) + "%";  // as percent string
        ang *= MPI2;

        // get the range outer radius
        r -= this.width / 2;
        r += this.innerWidth / 2;
        ctx.fillStyle = this.color;
        ctx.beginPath();
        // draw from start clockwise on outside then anti clockwise on inside.
        ctx.arc(cw, ch, r, this.start, this.start + ang);
        ctx.arc(cw, ch, r - this.innerWidth, this.start + ang, this.start, true);
        ctx.fill();
        
        // draw the percentage if there is a font 
        if(this.font !== null){     
            ctx.font = this.font;
            ctx.fillStyle = this.textCol;
            ctx.textAlign = "center";
            ctx.textBaseline = "middle";
            ctx.fillText(percent, cw, ch);
        }
    }    
}


//========================================================================
// Using the dial;

// create canvas and context
const canvas = document.createElement("canvas");
canvas.width = 200;
canvas.height = 200;
const ctx = canvas.getContext("2d");
document.body.appendChild(canvas);  // add canvas to document.

//------------------------------------------------------------------------
// set up the dial
var myValue = 1;             // the value
dial.setRenderContext(ctx);  // attach the rendering context
dial.setValue(0);            // draws the dial first time

// ----------------------------------------------------------------------
// This function increase dial until 100% then waits 2 second
// and starts again
var speed = 1;
function moveDialUp(){
    myValue += speed;
    dial.setValue(myValue);
    if(myValue > 100){
        myValue = 0;
        speed = Math.random() * 5 + 1;
        setTimeout(moveDialUp, 2000); // restart in 2 second
    }else{
        setTimeout(moveDialUp, 50);
    }
}

// start it happening
moveDialUp();

Hide result

Rotate javascript circular canvas

.

More articles: