前端 css js 特效1111

Question

谁知道有没有关于角的插件，可以随时改变角度大小的 类型图片这种效果的

Answer 1

html部分

<canvas id="canvas">
            </canvas>

js部分

<script>
    getAngle(50, 30);
    /**
     * @param {Object} r angle角度对应圆的半径
     * @param {Object} angle 角度
     */
    function getAngle(r, angle) {
        //超出360°进行缩减
        while (angle > 360) {
            angle = angle - 360;
        }
        var c = document.getElementById("canvas");
        var ctx = c.getContext("2d");
        ctx.beginPath();
        //画里面的小弧度
        console.log(7/30*angle)
        ctx.arc(r, r, 20, 0, hypotenuse(r, angle), true);
        //画下面那根固定线
        ctx.moveTo(r, r);
        ctx.lineTo(2 * r, r);
        //画根据角度变化的线
        ctx.moveTo(r, r);
        //将半径当作斜边 根据sin cos求出对边和领边的长度 换算成对应的x y坐标
        ctx.lineTo(r + r * Math.cos(getHud(angle)), r - r * Math.sin(getHud(angle)));
        //画文字
        ctx.font = "10px Arial";
        //计算文字位置
        ctx.fillText(angle + '°', r+22, r-1/6*angle);
        ctx.stroke();
    }
    //换算小弧度的大小
    function hypotenuse(r, angle) {
        return (2 - angle / 180) * Math.PI;
    }
    //换算角度对应的弧度
    function getHud(angle) {
        return angle / 180 * Math.PI
    }
</script>