如何在JavaScript Canvas中为strokeStyle添加渐变？代码失效求助

嘿，我懂你遇到的麻烦——原来的纯色描边好好的，一换成渐变就直接罢工，这大概率是因为你没正确创建Canvas的渐变对象，反而想用CSS渐变那套字符串写法对吧？别慌，咱们一步步把这个问题搞定！

问题根源 #

Canvas 的 strokeStyle 不支持直接传入CSS渐变字符串，必须通过画布上下文的 createLinearGradient() 或 createRadialGradient() 方法创建渐变对象，再把这个对象赋值给 strokeStyle 才行。另外，渐变的坐标还得和你的圆形进度条匹配，不然渐变效果会跑偏到离谱。

修改后的完整代码 #

我帮你调整了 render() 函数，用径向渐变适配你的圆形进度条（要是喜欢线性渐变也能直接换，看你需求）：

HTML（保持不变）

<div class="countItem minutes">
 <canvas id="minutes-canvas" width="200" height="200"></canvas>
 <svg width="100%" height="100%">
 <circle id="outer" cx="50%" cy="50%" r="45%" fill="transparent" stroke-width="1%" stroke="#fff" />
 </svg>
 <h3>
 <span id="minutes-value"></span><br>
 <small>minutes</small>
 </h3>
 </div>

JavaScript（核心修改render函数）

// Set Launch Date (ms)
const launchDate = new Date("May 7, 2020 00:00").getTime();
// Context object
const c = { context: {}, values: {}, times: {} };
// Convert radians to degrees
function deg(d) {
 return (Math.PI / 180) * d - (Math.PI / 180) * 90;
}
function render() {
 c.context.minutes.clearRect(0, 0, 200, 200);
 c.context.minutes.beginPath();

 // 关键步骤：创建径向渐变对象
 // 参数说明：渐变起始中心(x,y)、起始半径，渐变结束中心(x,y)、结束半径
 const gradient = c.context.minutes.createRadialGradient(100, 100, 0, 100, 100, 90);
 // 添加颜色停止点（位置0到1，对应渐变从内到外的过渡）
 gradient.addColorStop(0, "#bbee2b"); // 圆心位置的颜色
 gradient.addColorStop(1, "#66aa00"); // 圆弧边缘的颜色

 // 把创建好的渐变对象赋值给strokeStyle
 c.context.minutes.strokeStyle = gradient;

 c.context.minutes.arc(100, 100, 90, deg(0), deg(6 * (c.times.minutes - 60)));
 c.context.minutes.lineWidth = 12;
 c.context.minutes.lineCap = "round";
 c.context.minutes.stroke();
}
function init() {
 // Get 2D contexts
 c.context.minutes = document.getElementById('minutes-canvas').getContext('2d');
 // Get displayed values
 c.values.minutes = document.getElementById('minutes-value');
 setInterval(function () {
 // Get todays date and time (ms)
 const now = new Date().getTime();
 // Get distance from now to launchDate
 const distance = launchDate - now;
 // Time calculations
 c.times.minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
 c.values.minutes.innerText = c.times.minutes;
 render(); // Draw!
 }, 1000);
}
init();

额外小提示 #

• 如果想要线性渐变，就用 createLinearGradient(x1,y1,x2,y2)，比如做一个从左到右的渐变：createLinearGradient(10,100,190,100)
• 颜色停止点可以加多个，比如 gradient.addColorStop(0.5, "#99dd11")，就能实现中间过渡色的效果
• 要确保渐变的结束半径和你 arc() 方法里的半径（这里是90）一致，这样渐变刚好能覆盖整个描边

内容的提问来源于stack exchange，提问作者Dlamini.M