使用图像掩码将段添加到jQuery.knob

Question

我正在使用https://stackoverflow.com/a/26469607/3634990并尝试将细分添加到径向。我不熟悉Canvas绘图，所以这看起来不是最好的选择 - 我真正需要做的就是在绘制的Knob画布元素上覆盖一个蒙版图像。我尝试过各种各样的变体而且似乎没有用（我猜猜面具不适用于画布？）

我开始涉足尝试在JQueryKnob绘制方法中绘制alpha线条，但是也没有任何运气。

有什么想法吗？我迷失在这里

Answer 1

你走在正确的轨道上...只需在旋钮的draw方法中绘制蒙面图像。

$(".knob").knob({
    draw : function () {
        var ctx=this.g;
        var x=this.xy;
        var y=this.xy;
        var r=this.radius;
        var iw=img.width;
        var ih=img.height;
        ctx.save();
        ctx.beginPath();
        ctx.arc(x,y,r,0,Math.PI*2);
        ctx.clip();
        ctx.drawImage( img,  0,0,iw,ih,  x-iw/2,y-ih/2,iw,ih );
        ctx.restore();
    }
});

以下是示例代码和演示： https://jsfiddle.net/m1erickson/g8rx58hh/