How to make jquery canvas gradient for jQuery?
Here is the project I am trying to achieve with canvas:
I need to get a gradient in the radius of a circle with some inner shadow along the edges.
I have very minimal knowledge with canvas, so any help would be much appreciated.
I am using jquery knob plugin to display progress bar: 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;
}
and this is what I have been able to achieve so far with the above code and changing the fgColor in the http://anthonyterrien.com/js/jquery.knob.js file (i know I should not edit this file, but also as in the trial I changed fgColor):
fgColor: this.$.data('fgcolor') || '#dd3002',
+3
source to share
1 answer
Here is the starting point: This is a gradient arc with 3D shading.
You can draw a gradient arc like this:
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();
}
You can draw an arc with 3D shadows:
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();
}
Sample code and demo example:
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>
+2
source to share