css锥形渐变

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>svg-test</title>
    <style>
        .test {
            width: 160px;
            height: 160px;
            border-radius: 50%;
            background: linear-gradient(#6DB0FF, rgba(129, 255, 225, 0.5));
            background: conic-gradient(from -40.08deg at 50% 50%, #6DB0FF 0deg, rgba(129, 255, 225, 0.5) 360deg);
        }
    </style>
</head>

<body>
    <svg width="160" height="160" viewbox="0 0 160 160">
        <defs>
            <pattern id="fill-img" patternUnits="userSpaceOnUse" width="160" height="160">
                <image id="test-img"
                    xlink:href="http://test/assets/4890701-417c25e40509aefc.png"
                    x="0" y="0" width="160" height="160">
                </image>
            </pattern>
        </defs>

        <circle fill="none" stroke="url(#fill-img)"
        stroke-width="15" cx="80" cy="80" r="72" stroke-dasharray="100 0"
        stroke-dashoffset="100" stroke-linecap="round" />
    </svg>
    <div class="test"></div>
    <canvas id="myCanvas">当前浏览器不支持canvas组件请升级！</canvas>

    <script>
        /**
  *
  * @param startColor 指定起始颜色
  * @param endColor   指定结束颜色
  * @param step       划分渐变色区域数量
  * @returns {Array}  返回渐变色数组
  */
    let gradientColor = function(startColor, endColor, step) {
        let startRGB = this.colorRgb(startColor); //转换为rgb数组模式
        let startR = startRGB[0];
        let startG = startRGB[1];
        let startB = startRGB[2];

        let endRGB = this.colorRgb(endColor);
        let endR = endRGB[0];
        let endG = endRGB[1];
        let endB = endRGB[2];

        let sR = (endR - startR) / step; //总差值
        let sG = (endG - startG) / step;
        let sB = (endB - startB) / step;

        let colorArr = [];
        for (let i = 0; i < step; i++) {
            //计算每一步的hex值
            let hex = this.colorHex('rgb(' + parseInt((sR * i + startR)) + ',' + parseInt((sG * i + startG)) + ',' +
                parseInt((sB * i + startB)) + ')');
            colorArr.push(hex);
        }
        return colorArr;
    };

    // 将hex表示方式转换为rgb表示方式(这里返回rgb数组模式)
    gradientColor.prototype.colorRgb = function(sColor) {
        let reg = /^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$/;
        sColor = sColor.toLowerCase();
        if (sColor && reg.test(sColor)) {
            if (sColor.length === 4) {
                let sColorNew = "#";
                for (let i = 1; i < 4; i += 1) {
                    sColorNew += sColor.slice(i, i + 1).concat(sColor.slice(i, i + 1));
                }
                sColor = sColorNew;
            }
            //处理六位的颜色值
            let sColorChange = [];
            for (let i = 1; i < 7; i += 2) {
                sColorChange.push(parseInt("0x" + sColor.slice(i, i + 2)));
            }
            return sColorChange;
        } else {
            return sColor;
        }
    };
    // 将rgb表示方式转换为hex表示方式
    gradientColor.prototype.colorHex = function(rgb) {
        let _this = rgb;
        let reg = /^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$/;
        if (/^(rgb|RGB)/.test(_this)) {
            let aColor = _this.replace(/(?:\(|\)|rgb|RGB)*/g, "").split(",");
            let strHex = "#";
            for (let i = 0; i < aColor.length; i++) {
                let hex = Number(aColor[i]).toString(16);
                hex = hex < 10 ? 0 + '' + hex : hex; // 保证每个rgb的值为2位
                if (hex === "0") {
                    hex += hex;
                }
                strHex += hex;
            }
            if (strHex.length !== 7) {
                strHex = _this;
            }
            return strHex;
        } else if (reg.test(_this)) {
            let aNum = _this.replace(/#/, "").split("");
            if (aNum.length === 6) {
                return _this;
            } else if (aNum.length === 3) {
                let numHex = "#";
                for (let i = 0; i < aNum.length; i += 1) {
                    numHex += (aNum[i] + aNum[i]);
                }
                return numHex;
            }
        } else {
            return _this;
        }
    };

    let color_list = new gradientColor("#706caa", "#f2f2b0", 180); //颜色值分为180等份


    function toHighDPI(canvas) {
      const ctx = canvas.getContext('2d');
      const { width, height } = canvas;
      const { devicePixelRatio = 1 } = window;
      canvas.width = width * devicePixelRatio;
      canvas.height = height * devicePixelRatio;
      canvas.style.width = `${width}px`;
      canvas.style.height = `${height}px`;
      ctx.scale(devicePixelRatio, devicePixelRatio);
    }

    var c = document.getElementById('myCanvas');
    var ctx = c.getContext('2d');
    var mW = c.width = 300;
    var mH = c.height = 300;
    toHighDPI(c);
    var lineWidth = 5;
    var r = mW / 2; //中间位置
    var cR = r - 4 * lineWidth; //圆半径
    var startAngle = -(1 / 2 * Math.PI); //开始角度
    var endAngle = startAngle + 2 * Math.PI; //结束角度
    var xAngle = 2 * (Math.PI / 180); //偏移角度量
    var cArr = []; //圆坐标数组
    var center = {x: mW / 2, y: mH / 2};      //园的中心点坐标

    //初始化圆坐标数组
    for (var i = startAngle; i <= endAngle; i += xAngle) {
        //通过sin()和cos()获取每个角度对应的坐标
        var x = r + cR * Math.cos(i);
        var y = r + cR * Math.sin(i);
        cArr.push([x, y]);
    } //移动到开始点
    var startPoint = cArr.shift();
    // ctx.beginPath();
    // ctx.moveTo(startPoint[0], startPoint[1]); //渲染函数
    var i = 0;    //计数

    var img = document.getElementById('test-img')
    var render = function() {

        //画圈
        if (cArr.length) {
            ctx.save();
            ctx.beginPath();
            ctx.lineWidth = lineWidth;

            // ctx.strokeStyle = '#1c86d1';
            ctx.strokeStyle = color_list[i];

            ctx.moveTo(center.x, center.y);
            var tmpPoint = cArr.shift();
            ctx.lineTo(tmpPoint[0], tmpPoint[1]);

            ctx.stroke();
            ctx.restore();
            i++;
        } else {
            cArr = null;
            return;
        }
         
        c.toBlob(function(blob) {
            url = URL.createObjectURL(blob);
            img.setAttribute('xlink:href', url)
        });
        requestAnimationFrame(render);
    };

    render();

//第二种画法，旋转坐标系
// ctx.translate(250, 250);
// var center = [0, 0];
// var r = 100;

//  for (var i =0; i < 3600; i+=1) {
//     var angle = i / 10 * Math.PI / 180;
//     ctx.save();
//     ctx.rotate(angle);
//     ctx.beginPath();
//     ctx.strokeStyle = color_list[i];
//     ctx.moveTo(center[0] + r, center[1]);
//     ctx.lineTo(center[0], center[1]);
//     ctx.stroke();
//     ctx.restore();
//  }
    </script>
</body>

</html>
css锥形渐变

陈其文

引用和评论

微信小程序XR-FRAME初体验

腾讯新闻中心首页改版啦

网页设计的垂直居中

CSS团队协作规范

前端如何入门 Go 语言

100个React最佳实践小技巧

前端开发工具
