css锥形渐变
站长
· 阅读数 34
<!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>转载自:https://segmentfault.com/a/1190000041507753