Question

我有一个带弧的画布，里面有一些标签。

这是小提琴链接 - 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是画布中心点。任何帮助，将不胜感激。 PS：我是画布的新手！

Answer 1

由于旋转时它是对称的，因此很容易添加到我们按照我们想要旋转圆圈的数量绘制线段的角度。

有很多代码什么都不做，所以将代码缩减到更易于管理。

＆＃13;

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); 

    }
}

＆＃13;

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

＆＃13;

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

＆＃13;

在其中心旋转画布弧

1 个答案: