HTML5 Canvas如何绘制带有渐变边框的鼠形？
use*_*501 3 html javascript bezier html5-canvas
经过大量的搜索之后，我找不到任何回答如何在HTML5画布中绘制波浪形的教程，请原谅我，因为我的数学能力很差。
但是我确实找到了一些类似/相关的答案，但是我不知道如何结合这些知识...
当窗口较大时，HTML5 Canvas Alpha透明度在Firefox的曲线中不起作用
我尝试达到的效果：
谢谢你的帮助！
更新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
// /sf/ask/3514448451/
// //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
// /sf/answers/1556203141/
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。
如果我们阅读有关squircles的Wikipedia文章，我们会发现这只是2或更高次方的未加权椭圆函数，这意味着我们可以很容易地计算给定“ x”值的“ y”值，并以此方式进行绘制，但是这样做会给我们带来极为不平衡的细分：小的变化x将导致y起点和终点的巨大变化，而y中点的微小变化。
取而代之的是，让我们将圆盘建模为参数函数，以便我们改变一个控制值，并获得合理平均间隔的间隔进行处理。我们可以在Wikipedia上关于superellipse函数的文章中找到解释的内容：
x = |cos(t)^(2/n)| * sign(cos(t))
y = |sin(t)^(2/n)| * sign(sin(t))
对于t从0到2π，并且固定到1半径（这样它们从乘法消失）。
如果实现了这一点，那么我们几乎可以在事后添加彩虹色，分别绘制每个路径段，并使用一种strokeStyle使用HSL颜色的颜色，其中色相值根据我们的t值而变化：
x = |cos(t)^(2/n)| * sign(cos(t))
y = |sin(t)^(2/n)| * sign(sin(t))
然后，我们可以将其与一些标准的Canvas2D API代码结合使用：
// 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);
}
完成所有设置后，绘制代码非常简单：
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);
运行此命令将产生以下问题：
使用jsbin可以播放数字：https：//jsbin.com/haxeqamilo/edit？js，输出
当然，您也可以采用另一种方法：创建一个SVG元素（因为SVG是HTML5的一部分）<path>，并为其设置一个元素，并适当设置其宽度，高度和视图框，然后生成一个d属性和渐变颜色，但这就是肯定会更细腻。
- 更新了答案以适合您的需求，但是如果您想知道“如何用彩虹色绘制画布路径”，您可能[应该问]（/ help / how-to-ask），特别是=） (2认同)