javascript - 如何为 jquery 旋钮做 jquery Canvas 渐变？

Question

这是我尝试使用 Canvas 实现的设计:

我必须在圆的半径范围内获得渐变，并且沿着边缘有一些内部阴影。

JSFIDDLE

我对 Canvas 知之甚少，因此非常感谢您的帮助。

我正在使用 jquery knob 插件来显示进度条:JQUERY-KNOB

HTML

<div class="demo">
  <div style="width: 100%; margin-bottom: 20px; margin-left:100px;">
    <br>
    <br>
    <input class="knob" data-width="100%" value="45">
  </div>
</div>

JS

        $(function ($) {

        $(".knob").knob({
            class: 'group-canvas',
            change: function (value) {
                //console.log("change : " + value);
            },
            release: function (value) {
                //console.log(this.$.attr('value'));
                console.log("release : " + value);
            },
            cancel: function () {
                console.log("cancel : ", this);
            },
            /*format : function (value) {
                return value + '%';
            },*/
            draw: function () {

                // "tron" case
                if (this.$.data('skin') == 'tron') {

                    this.cursorExt = 0.3;

                    var a = this.arc(this.cv) // Arc
                    ,
                        pa // Previous arc
                        ,
                        r = 1;

                    this.g.lineWidth = this.lineWidth;

                    if (this.o.displayPrevious) {
                        pa = this.arc(this.v);
                        this.g.beginPath();
                        this.g.strokeStyle = this.pColor;
                        this.g.arc(this.xy, this.xy, this.radius - this.lineWidth, pa.s, pa.e, pa.d);
                        this.g.stroke();
                    }

                    this.g.beginPath();
                    this.g.strokeStyle = r ? this.o.fgColor : this.fgColor;
                    this.g.arc(this.xy, this.xy, this.radius - this.lineWidth, a.s, a.e, a.d);
                    this.g.stroke();

                    this.g.lineWidth = 2;
                    this.g.beginPath();
                    this.g.strokeStyle = this.o.fgColor;
                    this.g.arc(this.xy, this.xy, this.radius - this.lineWidth + 1 + this.lineWidth * 2 / 3, 0, 2 * Math.PI, false);
                    this.g.stroke();

                    return false;
                }
            }
        });


        // Example of infinite knob, iPod click wheel
        var v, up = 0,
            down = 0,
            i = 0,
            $idir = $("div.idir"),
            $ival = $("div.ival"),
            incr = function () {
                i++;
                $idir.show().html("+").fadeOut();
                $ival.html(i);
            },
            decr = function () {
                i--;
                $idir.show().html("-").fadeOut();
                $ival.html(i);
            };

    });

CSS

.group-canvas {

width: 20vh !important;

height: 20vh !important;

}

.knob {

margin-top: 14vh !important;

width: 24vh !important;

height: 13vh !important;

font-size: 9vh !important;

margin-left: -32vh !important;

}

这就是我到目前为止使用上述代码并更改 http://anthonyterrien.com/js/jquery.knob.js 中的 fgColor 所取得的成果。文件(我知道我不应该编辑这个文件，但作为试验我已经改变了 fgColor):

fgColor: this.$.data('fgcolor') || '#dd3002',

Answer 1

这里是您的起点: 这是一个带有 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();
}

您可以像这样绘制带有 3D 阴影的弧线:

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(150,150,93, -PI/4,Math.PI/4, startColor,endColor,43);

drawShadow(150,150,120,50);

ctx.textAlign='center';
ctx.textBaseline='middle';
ctx.font='40px verdana';
ctx.fillStyle=startColor;
ctx.fillText('25%',150,150);

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();
}

body{ background-color: white; }
canvas{border:1px solid red; margin:0 auto; }

<canvas id="canvas" width=300 height=300></canvas>