<!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>