Javascript 如何为jquery旋钮执行jquery画布渐变？

以下是我尝试使用canvas实现的设计：

我必须得到圆半径的梯度，边缘有一些内部阴影

我对canvas的了解非常少，因此非常感谢您的帮助

我正在使用jquery旋钮插件显示进度条：

HTML

CSS

这就是我迄今为止通过上述代码和更改文件中的fgColor所实现的目标（我知道我不应该编辑此文件，但作为试用，我更改了fgColor）：

这是一个起点：这是一个带有3D阴影的渐变弧。

您可以像这样绘制渐变圆弧：

function drawGradientArc(cx,cy,r, startAngle,endAngle, startColor,endColor, strokewidth) {
    var sweep=endAngle-startAngle;       
    var xStart = cx + Math.cos(startAngle) * r;
    var xEnd = cx + Math.cos(startAngle + sweep) * r;
    var yStart = cy + Math.sin(startAngle) * r;
    var yEnd = cy + Math.sin(startAngle + sweep) * r;
    //
    var gradient = ctx.createLinearGradient(xStart, yStart, xEnd, yEnd);
    gradient.addColorStop(0, startColor);
    gradient.addColorStop(1.0, endColor);
    //
    ctx.beginPath();
    ctx.arc(cx, cy, r, startAngle, startAngle + sweep);
    ctx.lineWidth = strokewidth;
    ctx.strokeStyle = gradient;
    ctx.stroke();
    ctx.closePath();
}

function drawShadow(cx,cy,r,strokewidth){
    ctx.save();
    ctx.strokeStyle='white';
    ctx.lineWidth=5;
    ctx.shadowColor='black';
    ctx.shadowBlur=15;
    //
    ctx.beginPath();
    ctx.arc(cx,cy,r-5,0,PI*2);
    ctx.clip();
    //
    ctx.beginPath();
    ctx.arc(cx,cy,r,0,PI*2);
    ctx.stroke();
    //
    ctx.beginPath();
    ctx.arc(cx,cy,r-strokewidth,0,PI*2);
    ctx.stroke();
    ctx.shadowColor='rgba(0,0,0,0)';
    //
    ctx.beginPath();
    ctx.arc(cx,cy,r-strokewidth,0,PI*2);
    ctx.fillStyle='white'
    ctx.fill();
    //
    ctx.restore();
}

您可以像这样使用3D阴影绘制圆弧：

function drawGradientArc(cx,cy,r, startAngle,endAngle, startColor,endColor, strokewidth) {
    var sweep=endAngle-startAngle;       
    var xStart = cx + Math.cos(startAngle) * r;
    var xEnd = cx + Math.cos(startAngle + sweep) * r;
    var yStart = cy + Math.sin(startAngle) * r;
    var yEnd = cy + Math.sin(startAngle + sweep) * r;
    //
    var gradient = ctx.createLinearGradient(xStart, yStart, xEnd, yEnd);
    gradient.addColorStop(0, startColor);
    gradient.addColorStop(1.0, endColor);
    //
    ctx.beginPath();
    ctx.arc(cx, cy, r, startAngle, startAngle + sweep);
    ctx.lineWidth = strokewidth;
    ctx.strokeStyle = gradient;
    ctx.stroke();
    ctx.closePath();
}

function drawShadow(cx,cy,r,strokewidth){
    ctx.save();
    ctx.strokeStyle='white';
    ctx.lineWidth=5;
    ctx.shadowColor='black';
    ctx.shadowBlur=15;
    //
    ctx.beginPath();
    ctx.arc(cx,cy,r-5,0,PI*2);
    ctx.clip();
    //
    ctx.beginPath();
    ctx.arc(cx,cy,r,0,PI*2);
    ctx.stroke();
    //
    ctx.beginPath();
    ctx.arc(cx,cy,r-strokewidth,0,PI*2);
    ctx.stroke();
    ctx.shadowColor='rgba(0,0,0,0)';
    //
    ctx.beginPath();
    ctx.arc(cx,cy,r-strokewidth,0,PI*2);
    ctx.fillStyle='white'
    ctx.fill();
    //
    ctx.restore();
}

示例代码和演示：

function drawGradientArc(cx,cy,r, startAngle,endAngle, startColor,endColor, strokewidth) {
    var sweep=endAngle-startAngle;       
    var xStart = cx + Math.cos(startAngle) * r;
    var xEnd = cx + Math.cos(startAngle + sweep) * r;
    var yStart = cy + Math.sin(startAngle) * r;
    var yEnd = cy + Math.sin(startAngle + sweep) * r;
    //
    var gradient = ctx.createLinearGradient(xStart, yStart, xEnd, yEnd);
    gradient.addColorStop(0, startColor);
    gradient.addColorStop(1.0, endColor);
    //
    ctx.beginPath();
    ctx.arc(cx, cy, r, startAngle, startAngle + sweep);
    ctx.lineWidth = strokewidth;
    ctx.strokeStyle = gradient;
    ctx.stroke();
    ctx.closePath();
}

function drawShadow(cx,cy,r,strokewidth){
    ctx.save();
    ctx.strokeStyle='white';
    ctx.lineWidth=5;
    ctx.shadowColor='black';
    ctx.shadowBlur=15;
    //
    ctx.beginPath();
    ctx.arc(cx,cy,r-5,0,PI*2);
    ctx.clip();
    //
    ctx.beginPath();
    ctx.arc(cx,cy,r,0,PI*2);
    ctx.stroke();
    //
    ctx.beginPath();
    ctx.arc(cx,cy,r-strokewidth,0,PI*2);
    ctx.stroke();
    ctx.shadowColor='rgba(0,0,0,0)';
    //
    ctx.beginPath();
    ctx.arc(cx,cy,r-strokewidth,0,PI*2);
    ctx.fillStyle='white'
    ctx.fill();
    //
    ctx.restore();
}

var canvas=document.getElementById（“canvas”）；
var ctx=canvas.getContext（“2d”）；
var-PI=Math.PI；
var startColor='#DD3002'；
var endColor='#FF9966'；
drawGradientArc（150150,93，-PI/4，Math.PI/4，startColor，endColor，43）；
drawShadow（150120,50）；
ctx.textAlign='center'；
ctx.textbrealine='middle'；
ctx.font='40px verdana'；
ctx.fillStyle=startColor；
ctx.fillText（'25%”，150150）；
函数drawShadow（cx、cy、r、strokewidth）{
ctx.save（）；
ctx.strokeStyle='white'；
ctx.线宽=5；
ctx.shadowColor='black'；
ctx.shadowBlur=15；
//
ctx.beginPath（）；
ctx.弧（cx，cy，r-5,0，PI*2）；
ctx.clip（）；
//
ctx.beginPath（）；
弧（cx，cy，r，0，PI*2）；
ctx.stroke（）；
//
ctx.beginPath（）；
ctx.弧（cx，cy，r-行程宽度，0，PI*2）；
ctx.stroke（）；
ctx.shadowColor='rgba（0,0,0,0'）；
//
ctx.beginPath（）；
ctx.弧（cx，cy，r-行程宽度，0，PI*2）；
ctx.fillStyle='white'
ctx.fill（）；
//
ctx.restore（）；
}
函数drawGradientArc（cx、cy、r、startAngle、endAngle、startColor、endColor、strokewidth）{
var扫描=端角星形缠绕；
var xStart=cx+Math.cos（startAngle）*r；
var xEnd=cx+Math.cos（startAngle+sweep）*r；
var yStart=cy+Math.sin（startAngle）*r；
var yEnd=cy+Math.sin（startAngle+sweep）*r；
//
var gradient=ctx.createLinearGradient（xStart、yStart、xEnd、yEnd）；
渐变。添加颜色停止（0，开始颜色）；
渐变。addColorStop（1.0，endColor）；
//
ctx.beginPath（）；
ctx.arc（cx、cy、r、星形缠结、星形缠结+扫掠）；
ctx.lineWidth=冲程宽度；
ctx.strokeStyle=梯度；
ctx.stroke（）；
ctx.closePath（）；
}

body{背景色：白色；}
画布{边框：1px纯红；边距：0自动；}

---

我为您发布了一个很好的起点。这里已经很晚了，所以有点艰难——但这是一个好的开始。晚安谢谢你，马克，非常感谢。我会看一看。马克，我想这是用jquery旋钮插件完成的。这在所有设备上都必须是完全响应的，jquery旋钮很容易做到这一点。此外，拱门必须在圆中分为8个部分。每个渐变填充部分是一个拱形，所以我们应该有8个圆弧。酷——很高兴我能帮上忙！接下来的步骤是（#1）从jQuery旋钮中提取数据绑定、UI和动画逻辑，并（#2）使用我的gradient-3D圆弧代码作为样式。顺便说一句，在您将#1和#2组合到所需的库中之后，将库转换为查询插件非常简单。简单如下：

$.fn.KnobByDexter=function（）{…}

祝您的项目好运。：-）