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