Canvas画的圆的周长怎么计算

今天做东西做到怀疑人生,初中都喂狗了。
JavaScript

    HTMLCanvasElement.prototype.draw = function (alpha, radius, line, width, sec, direction) {
        var context = this.getContext("2d"),
        start = 0;
        for(var i = 0; i < line.length; i++){
            line[i] = line[i] * radius / 2 * Math.PI / 180;
        }
        context.beginPath();
        context.strokeStyle = "#3498db";
        context.lineCap = "square";
        context.globalAlpha = alpha;
        context.lineWidth = width;
        context.setLineDash(line);
        context.arc(125, 125, radius / 2, start - Math.PI * 0.5, start + Math.PI * 1.5, false);
        context.stroke();

        setInterval(function draw(){
            context.clearRect(0, 0, 250, 250);
            if(direction)
                start += Math.PI * 2 / sec / 1000;
            else
                start -= Math.PI * 2 / sec / 1000;
            if(start >= Math.PI * 2){
                start -= Math.PI * 2
            }
            if(start <= -Math.PI * 2){
                start += Math.PI * 2
            }
            context.beginPath();
            context.strokeStyle = "#3498db";
            context.lineCap = "square";
            context.globalAlpha = alpha;
            context.lineWidth = width;
            context.setLineDash(line);
            context.arc(125, 125, radius / 2, start - Math.PI * 0.5, start + Math.PI * 1.5, false);
            context.stroke();
        }, 1);
    }
    
    var angel = 360 * new Date().getSeconds() / 60;
    var canvas = document.createElement("canvas");
    document.getElementsByClassName("box")[0].appendChild(canvas);
    canvas.setAttribute("class", "img mid");
    canvas.setAttribute("width", "250px");
    canvas.setAttribute("height", "250px");
    canvas.draw(1, 60, [0, 0 + angel, 0, 360 - angel], 3, 60, true);

css

.box {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    width: 240px;
    height: 240px;
    border-radius: 50%;
}

.box .img {
    position: absolute;
}

.mid{
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}

代码如上,旋转速度很不对劲,感觉是自己周长计算是错的,因为显示的长度也不对劲。

阅读 3.4k
2 个回答

clipboard.png

没太懂你要问什么 ... 加了颜色看了一下,图形倒是圆的,话说 canvas width 和 height 不应该带 px 的吧

算圆的周长?

c = 2 * Math.PI * radius; (c = 2πr;)

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题