javascript - Canvas有关圆的计算

问题描述

问 题

在Canvas绘制东西的时候遇到的问题，想要通过虚线来达成一个圆环不同长度的效果
以下为最终效果

图源imgur，ke'neng

代码如下

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

在计算过程中，我输出了line计算后的结果确实与圆的周长相等（使用半径计算），但是位置不对。
以及动画这里，2PI/时间应该就是单位时间应该走的角度，但是速度也不对。
努力了大概5小时束手无策了……

RunJS

经帮助动画的速度应该是正常了，但是绘制的虚线不对依旧xd

解决方案

说实话，效果是肯定能实现的。我没看你的代码，太累了不想看。我给你提供一点建议：

一般像写这种功能的时候首先要想的是先实现一条线段的功能，然后扩大效果（创建其他实例或者调用其他方法），用写插件的思想来考虑最好。

按照你这里的需求，我们先提取出可变的变量：

1. lineWidth ： 圆弧的宽度
2. startAngle && endAngle : 起始(结束)角度，用于通过arc绘制不同长度的圆弧
3. radius ：不同圆弧距离圆心的半径
4. strokeStyle ：每条圆弧对应的填充颜色
5. speed ： 圆弧做圆周运动时的速度，可以基于帧计算，也可以基于时间计算，后者比较好一点。
6. alpha : 透明度，可能会用到

你把这些东西提取出来就很容易弄了，以面向对象的方式或者函数编程都可以，先通过对应的方法弄出一条圆弧能正常运行，后面的不断调整参数创建对象就可以了。

动画主要是调整startAngle && endAngle的值

这篇关于javascript - Canvas有关圆的计算的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！