javascript - 在其中心旋转 Canvas 弧

Question

我有一个带有弧形的 Canvas ，里面有一些标签。

这是 fiddle 链接 - Fiddle下面是代码:

    var canvas = document.getElementById("myCanvas"),
    ctx = canvas.getContext("2d"),
    x = canvas.width / 2,
    y = canvas.height / 2,
    radius = 100;

ctx.lineWidth = 2;

var numberofArcs = 10,
    sengmentWidth = 1.5 * Math.PI / numberofArcs,
    pieAngle = 1.5 * Math.PI / numberofArcs;

console.log(pieAngle);

var labeltext = '',
    font = 16,
    hightlight = 1;

drawSegments(radius, font, hightlight);

ctx.translate(x, y);
ctx.rotate(135 * Math.PI);
ctx.translate(-x, -y);

function drawSegments(radius, font, highlight) {
    var offset = 0;

    for (var i = 0; i < numberofArcs; i++) {
        (i<=8) ? offset = 3 : offset = 8;
        
        ctx.save();
        ctx.beginPath();
        ctx.moveTo(x, y);

        ctx.arc(x, y, radius, i * pieAngle, (i + 1) * pieAngle);

        var hueValue = i * 15;

        ctx.fillStyle = 'hsl(' + hueValue + ',70%, 60%)';
        ctx.fill();
        ctx.lineTo(x, y);
        ctx.lineWidth = 3;
        ctx.strokeStyle = '#f3f5f6';
        ctx.stroke();

        ctx.beginPath();
        ctx.moveTo(x, y);
        ctx.arc(x, y, radius - 10, i * pieAngle, (i + 1) * pieAngle);
        ctx.fillStyle = '#f3f5f6';
        ctx.fill();
        ctx.lineTo(x, y);
        ctx.lineWidth = 0;
        labeltext = i + 1;
        ctx.font = '16px bold white';

        var width = ctx.measureText(labeltext).width;
        ctx.fillStyle = '#CCC';

        if ((i + 1) == highlight) {
            ctx.textBaseline = 'middle';

            console.log(offset);

            ctx.beginPath();
            ctx.moveTo(x + offset +(radius + 30) * Math.cos(i * pieAngle + ((i + 1) * pieAngle - i * pieAngle) / 2), y + (radius + 30) * Math.sin(i * pieAngle + ((i + 1) * pieAngle - i * pieAngle) / 2));
            ctx.arc(x + offset + (radius + 30) * Math.cos(i * pieAngle + ((i + 1) * pieAngle - i * pieAngle) / 2), y + (radius + 30) * Math.sin(i * pieAngle + ((i + 1) * pieAngle - i * pieAngle) / 2), 10, 0,  2 * Math.PI);
            ctx.fillStyle = 'red';
            ctx.fill();

            ctx.fillStyle = "#000";

            ctx.fillText(labeltext, x + (radius + 30) * Math.cos(i * pieAngle + ((i + 1) * pieAngle - i * pieAngle) / 2), y + (radius + 30) * Math.sin(i * pieAngle + ((i + 1) * pieAngle - i * pieAngle) / 2));
        } else {
            ctx.fillStyle = "black";
            ctx.fillText(labeltext, x + (radius + 30) * Math.cos(i * pieAngle + ((i + 1) * pieAngle - i * pieAngle) / 2), y + (radius + 30) * Math.sin(i * pieAngle + ((i + 1) * pieAngle - i * pieAngle) / 2));
        }
    }
}

canvas {
    border: 1px dotted black;
    color: black;
}

<canvas id="myCanvas" width="400" height="400" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>

我想要实现的是将整个圆弧连同标签旋转 135 度。我试过这段代码，但没有用:

ctx.translate(x, y);
ctx.rotate(135 * Math.PI/180);
ctx.translate(-x, -y);

其中 x 和 y 是 Canvas 中心点。任何帮助，将不胜感激。PS:我是 Canvas 新手!

Answer 1

由于旋转时这是对称的，因此很容易将我们绘制线段的 Angular 添加到我们想要旋转圆圈的量。

有很多代码什么都不做，所以已经减少了你的代码以便更易于管理。

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var x = canvas.width / 2;
var y = canvas.height / 2;
const radius = 100;
const numberofArcs = 10;
const sengmentWidth = 1.5 * Math.PI / numberofArcs;
const pieAngle = 1.5 * Math.PI / numberofArcs;
const spacePixels = 4;
const spaceRadians = spacePixels / radius;
const fontHeight = 16;
const textOffset = 30;
var hightlight = 1;
var angle = 135 * (Math.PI / 180);

drawSegments(x, y, radius, hightlight, angle);


function drawSegments(x, y, radius, highlight, angle) {
    ctx.textBaseline = 'middle';
    ctx.textAlign = "center";
    ctx.font = fontHeight + 'px bold white';
    // move center to x,y pos
    ctx.setTransform(1,0,0,1,x,y);
    x = y = 0;
    // draw the light gray pie and border
    var offset = 0;
    ctx.beginPath();
    ctx.moveTo(0,0);
    ctx.arc(0,0,radius + spacePixels, angle, angle + numberofArcs * pieAngle);
    ctx.lineTo(0,0); // or could use closePath
    ctx.fillStyle = '#f3f5f6';
    ctx.strokeStyle = '#e3e5e6';
    ctx.lineWidth = 4;
    ctx.stroke();
    ctx.fill();
    
    // for each segment draw coloured arc and text
    for (var i = 0; i < numberofArcs; i++) {
        var pA = pieAngle * i; // angle of start of pie pA;
        var tDir  = (i + 0.5) * pieAngle;  // angle of text
        pA += angle;  // add the rotated angle
        tDir += angle;
        var dist = radius + textOffset; // text distance from center
        var sR = spaceRadians; // the spacnig between segments
        
        ctx.strokeStyle = '#d3d5d6';  // for adding outline to coloured arcs
        ctx.lineWidth = 4;  // outline width is half this amount
        ctx.fillStyle = 'hsl(' + (i*15) + ',70%, 60%)';
        ctx.beginPath();
        ctx.arc(x, y, radius, pA + sR, pA + pieAngle -sR);  // outside CW
        ctx.arc(x, y, radius - 10,pA + pieAngle -sR, pA + sR,true);  // then inside CCW
        ctx.stroke();
        ctx.fill();
        if ((i + 1) === highlight) {
            
            ctx.fillStyle = 'red';
            ctx.beginPath();
            ctx.arc(dist * Math.cos(tDir), dist  * Math.sin(tDir), 10, 0,  2 * Math.PI);
            ctx.fill();
        }
        ctx.fillStyle = "black";
        ctx.fillText(""+(i + 1), Math.cos(tDir) * dist, Math.sin(tDir) * dist); 

    }
}

canvas {
    border: 1px dotted black;
    color: black;
}

<canvas id="myCanvas" width="400" height="400" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>