請問我canvas刻度該如何對齊外圈呢?

Question

https://codepen.io/wanroulin/...

Answer 1

已修正 數字也轉正了
附上https://codepen.io/wanroulin/... 供參考

主要修改的片段為內圈旋轉角度 及 數字校正角度

  // scale
        ctx.setTransform(1, 0, 0, 1, Math.floor(W / 2), Math.floor(W / 2));
        ctx.beginPath();
        ctx.lineWidth = 2;
        ctx.strokeStyle = 'rgba(255, 255, 255, .3)';
        // there should be 10 lines
        var stepAngle = (Math.PI * 2) / 10;
        // begin angle
        ctx.rotate(0.7 * Math.PI);
        // draw only 9 of the 10 lines
        for (var i = 0; i < 9; i++) {
            ctx.moveTo(Math.floor(W / 3) - 50, 0);
            ctx.lineTo(Math.floor(W / 3) - 55, 0);
            ctx.rotate(stepAngle);
        }
        ctx.stroke();
        ctx.setTransform(1, 0, 0, 1, 0, 0);

        // scale txt
        ctx.fillStyle = 'rgba(255, 255, 255, .4)';
        ctx.font = "1.5vh play";
        ctx.textAlign = 'center';
        ctx.textBaseline = 'middle';

        var stepAngle = (Math.PI * 2) / 10;
        var currentAngle = 0.20 * Math.PI;

        for (i = 0; i < 9; i++) {
            // move to center, unrotated
            ctx.setTransform(1, 0, 0, 1, Math.floor(W / 2), Math.floor(W / 2));
            // set current rotation
            ctx.rotate(currentAngle)
            // move the context to our text's position
            ctx.translate(0, Math.floor(W / 3) - 65);
            // inverse rotate so we face North
            ctx.rotate(-currentAngle);
            // fill at 0,0
            ctx.fillText(0 + 1 * i, 0, 0);
            // increment currentAngle for next iteration
            currentAngle += stepAngle;
        }
        ctx.setTransform(1, 0, 0, 1, 0, 0);

        ctx.restore();