HTML5 Canvas 如何画带渐变边框的圆圈？
HTML5 Canvas How to draw squircle with gradient border?
我谷歌了很多，我在HTML5canvas找不到任何关于如何画鼠形形状的教程，请原谅我数学很差
然而我确实找到了一些类似/相关的答案，但我不知道如何结合这些知识...
我尝试达到的效果：
感谢您的帮助！
更新 1：
到目前为止我创建的代码：
<body>
<div class="con">
<div class="ava"></div>
<canvas id="canvas"></canvas>
</div>
<script>
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var shadowPadding = 8;
var strokeWidth = 2;
canvas.width = canvas.height = (64 + shadowPadding * 2) * window.devicePixelRatio
canvas.style.width = canvas.style.height = `${canvas.width / window.devicePixelRatio}px`
function drawMultiRadiantCircle(xc, yc, r, radientColors) {
var partLength = (2 * Math.PI) / radientColors.length;
var start = 0;
var gradient = null;
var startColor = null,
endColor = null;
for (var i = 0; i < radientColors.length; i++) {
startColor = radientColors[i];
endColor = radientColors[(i + 1) % radientColors.length];
// x start / end of the next arc to draw
var xStart = xc + Math.cos(start) * r;
var xEnd = xc + Math.cos(start + partLength) * r;
// y start / end of the next arc to draw
var yStart = yc + Math.sin(start) * r;
var yEnd = yc + Math.sin(start + partLength) * r;
ctx.beginPath();
gradient = ctx.createLinearGradient(xStart, yStart, xEnd, yEnd);
gradient.addColorStop(0, startColor);
gradient.addColorStop(1, endColor);
ctx.lineWidth = strokeWidth;
ctx.strokeStyle = gradient;
// squircle START
//
// //Formula: (|x|)^3 + (|y|)^3 = radius^3
// ctx.moveTo(-r, 0);
// const radiusToPow = r ** 3;
// const rad = r
// for (let x = -rad ; x <= rad ; x++)
// ctx.lineTo(x + r, Math.cbrt(radiusToPow - Math.abs(x ** 3)) + r);
// for (let x = rad ; x >= -rad ; x--)
// ctx.lineTo(x + r, -Math.cbrt(radiusToPow - Math.abs(x ** 3)) + r);
// ctx.translate(r, r)
// ctx.restore()
// squircle END
// circle START
//
ctx.arc(xc, yc, r, start, start + partLength);
// circle END
if (i === 1) {
break
}
ctx.stroke();
ctx.closePath();
start += partLength;
}
}
var someColors = [];
someColors.push('#0F0');
someColors.push('#0FF');
someColors.push('#F00');
someColors.push('#FF0');
someColors.push('#F0F');
var mid = canvas.width / 2;
var r = (canvas.width - (shadowPadding * 2)) / 2 + (strokeWidth / 2)
drawMultiRadiantCircle(mid, mid, r, someColors);
</script>
<style>
.con {
align-items: center;
justify-content: center;
display: flex;
height: 4rem;
margin: 6rem;
width: 4rem;
position: relative;
}
.ava {
background: #555 50% no-repeat;
background-size: contain;
border-radius: 24px;
height: 100%;
width: 100%;
}
canvas {
height: 100%;
width: 100%;
position: absolute;
}
</style>
</body>
用渐变颜色绘制圆的部分：
画一个圆圈：
我不知道如何像 context.arc 那样编写绘制一部分鼠形的算法。
如果我们阅读 wikipedia article on squircles，我们会发现这只是使用 2 或更高幂的未加权椭圆函数，这意味着我们可以很容易地计算 "y" 给定 [=48] 的值=] 值并以这种方式绘制东西，但这样做会给我们带来极其不均匀的片段：x 的微小变化将导致 y 在起点和终点的巨大变化，以及 y 的微小变化=15=]在中点。
相反，让我们将鼠形模型建模为参数函数，这样我们就可以改变一个控制值并获得合理均匀的间隔来使用。我们可以在 superellipse function:
上的维基百科文章中找到这个解释
x = |cos(t)^(2/n)| * sign(cos(t))
y = |sin(t)^(2/n)| * sign(sin(t))
对于 t 从 0 到 2π，半径固定为 1（因此它们从乘法中消失）。
如果我们实现它，那么我们几乎可以在事后添加彩虹色，分别绘制每个路径段，使用 strokeStyle 着色使用 HSL 颜色，其中色调值根据我们的 t 值：
// alias some math functions so we don't need that "Math." all the time
const abs=Math.abs, sign=Math.sign, sin=Math.sin, cos=Math.cos, pow=Math.pow;
// N=2 YIELDS A CIRCLE, N>2 YIELDS A SQUIRCLE
const n = 4;
function coord(t) {
let power = 2/n;
let c = cos(t), x = pow(abs(c), power) * sign(c);
let s = sin(t), y = pow(abs(s), power) * sign(s);
return { x, y };
}
function drawSegmentTo(t) {
let c = coord(t);
let cx = dim + r * c.x; // Here, dim is our canvas "radius",
let cy = dim + r * c.y; // and r is our circle radius, with
ctx.lineTo(cx, cy); // ctx being our canvas context.
// stroke segment in rainbow colours
let h = (360 * t)/TAU;
ctx.strokeStyle = `hsl(${h}, 100%, 50%)`;
ctx.stroke();
// start a new segment at the end point
ctx.beginPath();
ctx.moveTo(cx, cy);
}
然后我们可以将其与一些标准 Canvas2D API 代码结合使用：
const PI = Math.PI,
TAU = PI * 2,
edge = 200, // SIZE OF THE CANVAS, IN PIXELS
dim = edge/2,
r = dim * 0.9,
cvs = document.getElementById('draw');
// set up our canvas
cvs.height = cvs.width = edge;
ctx = cvs.getContext('2d');
ctx.lineWidth = 2;
ctx.fillStyle = '#004';
ctx.strokeStyle = 'black';
ctx.fillRect(0, 0, edge, edge);
完成所有设置后，绘制代码实际上是 straight-forward:
// THIS DETERMINES HOW SMOOTH OF A CURVE GETS DRAWN
const segments = 32;
// Peg our starting point, which we know is (r,0) away from the center.
ctx.beginPath();
ctx.moveTo(dim + r, dim)
// Then we generate all the line segments on the path
for (let step=TAU/segments, t=step; t<=TAU; t+=step) drawSegmentTo(t);
// And because IEEE floats are imprecise, the last segment may not
// actually reach our starting point. As such, make sure to draw it!
ctx.lineTo(dim + r, dim);
ctx.stroke();
运行 这将产生以下 squircle：
有了 jsbin，你就可以玩数字了：https://jsbin.com/haxeqamilo/edit?js,output
当然，您也可以采用完全不同的方式：使用 <path> 元素创建一个 SVG 元素（因为 SVG 是 HTML5 的一部分）并适当地设置宽度、高度和视图框，然后生成一个d属性和gradient-color那个，但是那肯定是way more finnicky.
使用手边的数学表达式，您可以对边界矩形进行全面扫描，并计算 pixel-by-pixel if
- 它在外面
- 它是边界的一部分
- 它在里面
对于渐变，我会对角度应用一些连续函数。喜欢一些 sin/cos 东西：
let ctx=cnv.getContext("2d");
function gradient(angle){
return "rgb("+
(128+127*Math.sin(angle*8))+","+
(128+127*Math.cos(angle*6))+","+
(128+127*Math.sin(angle*16))+")";
}
for(let x=0;x<360;x++){
ctx.fillStyle=gradient(x*Math.PI/180);
ctx.fillRect(250-180+x,0,1,10);
}
let mx=250,my=90,rx=70,ry=70;
let start=Date.now();
for(let x=-rx;x<=rx;x++)
for(let y=-ry;y<=ry;y++){
let r4=Math.pow(x/rx,4)+Math.pow(y/ry,4);
if(r4<0.8){
ctx.fillStyle="gray";
ctx.fillRect(mx+x,my+y,1,1);
}else if(r4<1){
ctx.fillStyle=gradient(Math.atan2(x,y));
ctx.fillRect(mx+x,my+y,1,1);
}
}
console.log(Date.now()-start);
<canvas id="cnv" width="500" height="170"></canvas>
对于 real-life 使用此方法可能会更好地将 off-screen 合成到 ImageData 中，也许 pre-calculating 梯度也是如此：
let ctx=cnv.getContext("2d");
let gradient=new Uint8Array(360*3);
for(let x=0;x<360;x++){
let r=gradient[x*3]=128+127*Math.sin(x*Math.PI/180*8);
let g=gradient[x*3+1]=128+127*Math.cos(x*Math.PI/180*6);
let b=gradient[x*3+2]=128+127*Math.sin(x*Math.PI/180*16);
ctx.fillStyle="rgb("+r+","+g+","+b+")";
ctx.fillRect(250-180+x,0,1,10);
}
let mx=250,my=90,rx=70,ry=70;
let start=Date.now();
let imgdata=ctx.createImageData(rx*2+1,ry*2+1);
let data=imgdata.data;
for(let y=-ry,idx=0;y<=ry;y++)
for(let x=-rx;x<=rx;x++){
let r4=Math.pow(x/rx,4)+Math.pow(y/ry,4);
if(r4<0.8){
data[idx++]=128;
data[idx++]=128;
data[idx++]=128;
data[idx++]=255;
}else if(r4<1){
gidx=Math.floor(180+Math.atan2(x,y)*180/Math.PI)%360*3;
data[idx++]=gradient[gidx++];
data[idx++]=gradient[gidx++];
data[idx++]=gradient[gidx++];
data[idx++]=255;
}else idx+=4;
}
ctx.putImageData(imgdata,mx-rx,my-ry);
console.log(Date.now()-start);
<canvas id="cnv" width="500" height="170"></canvas>
在我的机器上，后一种变体对于第一个 运行 较慢（大约 40 毫秒对 35 毫秒），但对于后续变体（14 毫秒对 31 毫秒，所以另一个不会真的加速）。但我没有检查它是否是 ImageData、gradient[] 或两者的结果。
编辑 06-07-2019 采纳建议，虽然不是一起...
Uint32Array 使其更短、更简单、更快：
let ctx=cnv.getContext("2d");
let gradient=new Uint32Array(360);
for(let x=0;x<360;x++){
let r=128+127*Math.sin(x*Math.PI/180*8);
let g=128+127*Math.cos(x*Math.PI/180*6);
let b=128+127*Math.sin(x*Math.PI/180*16);
gradient[x]=0xFF000000+(b<<16)+(g<<8)+r;
ctx.fillStyle="rgb("+r+","+g+","+b+")";
ctx.fillRect(250-180+x,0,1,10);
}
let mx=250,my=90,rx=70,ry=70;
let start=Date.now();
let imgdata=ctx.createImageData(rx*2+1,ry*2+1);
let data=new Uint32Array(imgdata.data.buffer);
for(let y=-ry,idx=0;y<=ry;y++)
for(let x=-rx;x<=rx;x++,idx++){
let r4=Math.pow(x/rx,4)+Math.pow(y/ry,4);
if(r4<0.8){
data[idx]=0xFF808080;
}else if(r4<1){
gidx=Math.floor(180+Math.atan2(x,y)*180/Math.PI)%360;
data[idx]=gradient[gidx];
}
}
ctx.putImageData(imgdata,mx-rx,my-ry);
console.log(Date.now()-start);
<canvas id="cnv" width="500" height="170"></canvas>
但是 anti-aliasing 对于 32 位数字来说不是很简单，所以这个恢复为单独的组件：
let ctx=cnv.getContext("2d");
let gradient=new Uint8Array(360*3);
for(let x=0;x<360;x++){
let r=gradient[x*3]=128+127*Math.sin(x*Math.PI/180*8);
let g=gradient[x*3+1]=128+127*Math.cos(x*Math.PI/180*6);
let b=gradient[x*3+2]=128+127*Math.sin(x*Math.PI/180*16);
ctx.fillStyle="rgb("+r+","+g+","+b+")";
ctx.fillRect(250-180+x,0,1,10);
}
let mx=250,my=90,r=70,rr=65;
let start=Date.now();
let imgdata=ctx.createImageData(r*2+1,r*2+1);
let data=imgdata.data;
function mix(a,b,w){
return b+(a-b)*w;
}
for(let y=-r,idx=0;y<=r;y++)
for(let x=-r;x<=r;x++){
let d=Math.pow(Math.pow(x,4)+Math.pow(y,4),0.25);
if(d<=rr){
data[idx++]=128;
data[idx++]=128;
data[idx++]=128;
data[idx++]=255;
}else if(d>=r){
idx+=4;
}else{
let gidx=Math.floor(180+Math.atan2(x,y)*180/Math.PI)%360*3;
if(d<rr+1){
let w=d-rr;
data[idx++]=mix(gradient[gidx++],128,w);
data[idx++]=mix(gradient[gidx++],128,w);
data[idx++]=mix(gradient[gidx++],128,w);
data[idx++]=255;
}else if(d>r-1){
let w=r-d;
data[idx++]=mix(gradient[gidx++],255,w);
data[idx++]=mix(gradient[gidx++],255,w);
data[idx++]=mix(gradient[gidx++],255,w);
data[idx++]=255;
}else{
data[idx++]=gradient[gidx++];
data[idx++]=gradient[gidx++];
data[idx++]=gradient[gidx++];
data[idx++]=255;
}
}
}
ctx.putImageData(imgdata,mx-r,my-r);
console.log(Date.now()-start);
<canvas id="cnv" width="500" height="170"></canvas>
我谷歌了很多，我在HTML5canvas找不到任何关于如何画鼠形形状的教程，请原谅我数学很差
然而我确实找到了一些类似/相关的答案，但我不知道如何结合这些知识...
我尝试达到的效果：
感谢您的帮助！
更新 1：
到目前为止我创建的代码：
<body>
<div class="con">
<div class="ava"></div>
<canvas id="canvas"></canvas>
</div>
<script>
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var shadowPadding = 8;
var strokeWidth = 2;
canvas.width = canvas.height = (64 + shadowPadding * 2) * window.devicePixelRatio
canvas.style.width = canvas.style.height = `${canvas.width / window.devicePixelRatio}px`
function drawMultiRadiantCircle(xc, yc, r, radientColors) {
var partLength = (2 * Math.PI) / radientColors.length;
var start = 0;
var gradient = null;
var startColor = null,
endColor = null;
for (var i = 0; i < radientColors.length; i++) {
startColor = radientColors[i];
endColor = radientColors[(i + 1) % radientColors.length];
// x start / end of the next arc to draw
var xStart = xc + Math.cos(start) * r;
var xEnd = xc + Math.cos(start + partLength) * r;
// y start / end of the next arc to draw
var yStart = yc + Math.sin(start) * r;
var yEnd = yc + Math.sin(start + partLength) * r;
ctx.beginPath();
gradient = ctx.createLinearGradient(xStart, yStart, xEnd, yEnd);
gradient.addColorStop(0, startColor);
gradient.addColorStop(1, endColor);
ctx.lineWidth = strokeWidth;
ctx.strokeStyle = gradient;
// squircle START
//
// //Formula: (|x|)^3 + (|y|)^3 = radius^3
// ctx.moveTo(-r, 0);
// const radiusToPow = r ** 3;
// const rad = r
// for (let x = -rad ; x <= rad ; x++)
// ctx.lineTo(x + r, Math.cbrt(radiusToPow - Math.abs(x ** 3)) + r);
// for (let x = rad ; x >= -rad ; x--)
// ctx.lineTo(x + r, -Math.cbrt(radiusToPow - Math.abs(x ** 3)) + r);
// ctx.translate(r, r)
// ctx.restore()
// squircle END
// circle START
//
ctx.arc(xc, yc, r, start, start + partLength);
// circle END
if (i === 1) {
break
}
ctx.stroke();
ctx.closePath();
start += partLength;
}
}
var someColors = [];
someColors.push('#0F0');
someColors.push('#0FF');
someColors.push('#F00');
someColors.push('#FF0');
someColors.push('#F0F');
var mid = canvas.width / 2;
var r = (canvas.width - (shadowPadding * 2)) / 2 + (strokeWidth / 2)
drawMultiRadiantCircle(mid, mid, r, someColors);
</script>
<style>
.con {
align-items: center;
justify-content: center;
display: flex;
height: 4rem;
margin: 6rem;
width: 4rem;
position: relative;
}
.ava {
background: #555 50% no-repeat;
background-size: contain;
border-radius: 24px;
height: 100%;
width: 100%;
}
canvas {
height: 100%;
width: 100%;
position: absolute;
}
</style>
</body>
用渐变颜色绘制圆的部分：
画一个圆圈：
我不知道如何像 context.arc 那样编写绘制一部分鼠形的算法。
如果我们阅读 wikipedia article on squircles，我们会发现这只是使用 2 或更高幂的未加权椭圆函数，这意味着我们可以很容易地计算 "y" 给定 [=48] 的值=] 值并以这种方式绘制东西，但这样做会给我们带来极其不均匀的片段：x 的微小变化将导致 y 在起点和终点的巨大变化，以及 y 的微小变化=15=]在中点。
相反，让我们将鼠形模型建模为参数函数，这样我们就可以改变一个控制值并获得合理均匀的间隔来使用。我们可以在 superellipse function:
上的维基百科文章中找到这个解释x = |cos(t)^(2/n)| * sign(cos(t))
y = |sin(t)^(2/n)| * sign(sin(t))
对于 t 从 0 到 2π，半径固定为 1（因此它们从乘法中消失）。
如果我们实现它，那么我们几乎可以在事后添加彩虹色，分别绘制每个路径段，使用 strokeStyle 着色使用 HSL 颜色，其中色调值根据我们的 t 值：
// alias some math functions so we don't need that "Math." all the time
const abs=Math.abs, sign=Math.sign, sin=Math.sin, cos=Math.cos, pow=Math.pow;
// N=2 YIELDS A CIRCLE, N>2 YIELDS A SQUIRCLE
const n = 4;
function coord(t) {
let power = 2/n;
let c = cos(t), x = pow(abs(c), power) * sign(c);
let s = sin(t), y = pow(abs(s), power) * sign(s);
return { x, y };
}
function drawSegmentTo(t) {
let c = coord(t);
let cx = dim + r * c.x; // Here, dim is our canvas "radius",
let cy = dim + r * c.y; // and r is our circle radius, with
ctx.lineTo(cx, cy); // ctx being our canvas context.
// stroke segment in rainbow colours
let h = (360 * t)/TAU;
ctx.strokeStyle = `hsl(${h}, 100%, 50%)`;
ctx.stroke();
// start a new segment at the end point
ctx.beginPath();
ctx.moveTo(cx, cy);
}
然后我们可以将其与一些标准 Canvas2D API 代码结合使用：
const PI = Math.PI,
TAU = PI * 2,
edge = 200, // SIZE OF THE CANVAS, IN PIXELS
dim = edge/2,
r = dim * 0.9,
cvs = document.getElementById('draw');
// set up our canvas
cvs.height = cvs.width = edge;
ctx = cvs.getContext('2d');
ctx.lineWidth = 2;
ctx.fillStyle = '#004';
ctx.strokeStyle = 'black';
ctx.fillRect(0, 0, edge, edge);
完成所有设置后，绘制代码实际上是 straight-forward:
// THIS DETERMINES HOW SMOOTH OF A CURVE GETS DRAWN
const segments = 32;
// Peg our starting point, which we know is (r,0) away from the center.
ctx.beginPath();
ctx.moveTo(dim + r, dim)
// Then we generate all the line segments on the path
for (let step=TAU/segments, t=step; t<=TAU; t+=step) drawSegmentTo(t);
// And because IEEE floats are imprecise, the last segment may not
// actually reach our starting point. As such, make sure to draw it!
ctx.lineTo(dim + r, dim);
ctx.stroke();
运行 这将产生以下 squircle：
有了 jsbin，你就可以玩数字了：https://jsbin.com/haxeqamilo/edit?js,output
当然，您也可以采用完全不同的方式：使用 <path> 元素创建一个 SVG 元素（因为 SVG 是 HTML5 的一部分）并适当地设置宽度、高度和视图框，然后生成一个d属性和gradient-color那个，但是那肯定是way more finnicky.
使用手边的数学表达式，您可以对边界矩形进行全面扫描，并计算 pixel-by-pixel if
- 它在外面
- 它是边界的一部分
- 它在里面
对于渐变，我会对角度应用一些连续函数。喜欢一些 sin/cos 东西：
let ctx=cnv.getContext("2d");
function gradient(angle){
return "rgb("+
(128+127*Math.sin(angle*8))+","+
(128+127*Math.cos(angle*6))+","+
(128+127*Math.sin(angle*16))+")";
}
for(let x=0;x<360;x++){
ctx.fillStyle=gradient(x*Math.PI/180);
ctx.fillRect(250-180+x,0,1,10);
}
let mx=250,my=90,rx=70,ry=70;
let start=Date.now();
for(let x=-rx;x<=rx;x++)
for(let y=-ry;y<=ry;y++){
let r4=Math.pow(x/rx,4)+Math.pow(y/ry,4);
if(r4<0.8){
ctx.fillStyle="gray";
ctx.fillRect(mx+x,my+y,1,1);
}else if(r4<1){
ctx.fillStyle=gradient(Math.atan2(x,y));
ctx.fillRect(mx+x,my+y,1,1);
}
}
console.log(Date.now()-start);
<canvas id="cnv" width="500" height="170"></canvas>
对于 real-life 使用此方法可能会更好地将 off-screen 合成到 ImageData 中，也许 pre-calculating 梯度也是如此：
let ctx=cnv.getContext("2d");
let gradient=new Uint8Array(360*3);
for(let x=0;x<360;x++){
let r=gradient[x*3]=128+127*Math.sin(x*Math.PI/180*8);
let g=gradient[x*3+1]=128+127*Math.cos(x*Math.PI/180*6);
let b=gradient[x*3+2]=128+127*Math.sin(x*Math.PI/180*16);
ctx.fillStyle="rgb("+r+","+g+","+b+")";
ctx.fillRect(250-180+x,0,1,10);
}
let mx=250,my=90,rx=70,ry=70;
let start=Date.now();
let imgdata=ctx.createImageData(rx*2+1,ry*2+1);
let data=imgdata.data;
for(let y=-ry,idx=0;y<=ry;y++)
for(let x=-rx;x<=rx;x++){
let r4=Math.pow(x/rx,4)+Math.pow(y/ry,4);
if(r4<0.8){
data[idx++]=128;
data[idx++]=128;
data[idx++]=128;
data[idx++]=255;
}else if(r4<1){
gidx=Math.floor(180+Math.atan2(x,y)*180/Math.PI)%360*3;
data[idx++]=gradient[gidx++];
data[idx++]=gradient[gidx++];
data[idx++]=gradient[gidx++];
data[idx++]=255;
}else idx+=4;
}
ctx.putImageData(imgdata,mx-rx,my-ry);
console.log(Date.now()-start);
<canvas id="cnv" width="500" height="170"></canvas>
在我的机器上，后一种变体对于第一个 运行 较慢（大约 40 毫秒对 35 毫秒），但对于后续变体（14 毫秒对 31 毫秒，所以另一个不会真的加速）。但我没有检查它是否是 ImageData、gradient[] 或两者的结果。
编辑 06-07-2019 采纳建议，虽然不是一起...
Uint32Array 使其更短、更简单、更快：
let ctx=cnv.getContext("2d");
let gradient=new Uint32Array(360);
for(let x=0;x<360;x++){
let r=128+127*Math.sin(x*Math.PI/180*8);
let g=128+127*Math.cos(x*Math.PI/180*6);
let b=128+127*Math.sin(x*Math.PI/180*16);
gradient[x]=0xFF000000+(b<<16)+(g<<8)+r;
ctx.fillStyle="rgb("+r+","+g+","+b+")";
ctx.fillRect(250-180+x,0,1,10);
}
let mx=250,my=90,rx=70,ry=70;
let start=Date.now();
let imgdata=ctx.createImageData(rx*2+1,ry*2+1);
let data=new Uint32Array(imgdata.data.buffer);
for(let y=-ry,idx=0;y<=ry;y++)
for(let x=-rx;x<=rx;x++,idx++){
let r4=Math.pow(x/rx,4)+Math.pow(y/ry,4);
if(r4<0.8){
data[idx]=0xFF808080;
}else if(r4<1){
gidx=Math.floor(180+Math.atan2(x,y)*180/Math.PI)%360;
data[idx]=gradient[gidx];
}
}
ctx.putImageData(imgdata,mx-rx,my-ry);
console.log(Date.now()-start);
<canvas id="cnv" width="500" height="170"></canvas>
但是 anti-aliasing 对于 32 位数字来说不是很简单，所以这个恢复为单独的组件：
let ctx=cnv.getContext("2d");
let gradient=new Uint8Array(360*3);
for(let x=0;x<360;x++){
let r=gradient[x*3]=128+127*Math.sin(x*Math.PI/180*8);
let g=gradient[x*3+1]=128+127*Math.cos(x*Math.PI/180*6);
let b=gradient[x*3+2]=128+127*Math.sin(x*Math.PI/180*16);
ctx.fillStyle="rgb("+r+","+g+","+b+")";
ctx.fillRect(250-180+x,0,1,10);
}
let mx=250,my=90,r=70,rr=65;
let start=Date.now();
let imgdata=ctx.createImageData(r*2+1,r*2+1);
let data=imgdata.data;
function mix(a,b,w){
return b+(a-b)*w;
}
for(let y=-r,idx=0;y<=r;y++)
for(let x=-r;x<=r;x++){
let d=Math.pow(Math.pow(x,4)+Math.pow(y,4),0.25);
if(d<=rr){
data[idx++]=128;
data[idx++]=128;
data[idx++]=128;
data[idx++]=255;
}else if(d>=r){
idx+=4;
}else{
let gidx=Math.floor(180+Math.atan2(x,y)*180/Math.PI)%360*3;
if(d<rr+1){
let w=d-rr;
data[idx++]=mix(gradient[gidx++],128,w);
data[idx++]=mix(gradient[gidx++],128,w);
data[idx++]=mix(gradient[gidx++],128,w);
data[idx++]=255;
}else if(d>r-1){
let w=r-d;
data[idx++]=mix(gradient[gidx++],255,w);
data[idx++]=mix(gradient[gidx++],255,w);
data[idx++]=mix(gradient[gidx++],255,w);
data[idx++]=255;
}else{
data[idx++]=gradient[gidx++];
data[idx++]=gradient[gidx++];
data[idx++]=gradient[gidx++];
data[idx++]=255;
}
}
}
ctx.putImageData(imgdata,mx-r,my-r);
console.log(Date.now()-start);
<canvas id="cnv" width="500" height="170"></canvas>