Question

我在使用HTML5画布旋转圆圈时遇到了麻烦。我正在创建一个圆圈，作为装载工具。现在，装载部分（柠檬绿色）从45度标记处开始。我似乎无法弄清楚如何让这部分开始于0度标记。任何帮助将不胜感激。

<!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>

对于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);

以下是浏览器中输出的屏幕截图：有没有办法将圆圈旋转45度？或者你们中的任何人都有另一种建议，我完全忽略了在这个例子中尝试过吗？

提前致谢！

Answer 1

创建圆时，需要将起始弧设置为顶部。 .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％）

Answer 2

创建一个简单的范围拨号。

下面是一个简单的表盘，其设置类似于范围滑块。

将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();

旋转圆形画布javascript

2 个答案:

创建一个简单的范围拨号。