I have a challenge with my arcs: the first one loads on page-load, the second one loads on mouse-over, and the third one loads on mouse-out. However, I want the mouse-over-out effect to happen repeatedly rather than just once as it currently does.
For reference, here's the fiddle link: http://jsfiddle.net/krish7878/7bX7n/
Below is the JavaScript code snippet:
var currentEndAngle = 0;
var currentStartAngle = 0;
var currentEndAngle2 = 0;
var currentStartAngle2 = 0;
var currentEndAngle3 = -0.5;
var currentStartAngle3 = -0.5;
var something = setInterval(draw, 5);
$("#canvas1").hover(
function(){
var something2 = setInterval(draw2, 5);
},
function(){
var something3 = setInterval(draw3, 5);
}
);
function draw() {
var can = document.getElementById('canvas1');
var canvas = document.getElementById("canvas1");
var context = canvas.getContext("2d");
var x = canvas.width / 2;
var y = canvas.height / 2;
var radius;
var width;
var currentColor = "#00b5ff";
var radius = 100;
var width = 8;
var startAngle = currentStartAngle * Math.PI;
var endAngle = (currentEndAngle) * Math.PI;
if(currentEndAngle < 0.1){
currentEndAngle = currentEndAngle - 0.01;
}
if (currentEndAngle < -0.5){
clearInterval(something);
}
context.beginPath();
context.arc(x, y, radius, startAngle, endAngle, true);
context.lineWidth = width;
context.strokeStyle = currentColor;
context.stroke();
}
function draw2() {
// Function code removed for brevity
}
function draw3() {
// Function code removed for brevity
}
Explanation of the code: There are three functions - draw(), draw2(), and draw3(). Draw is executed on page load, draw2() on mouse-over, and draw3() on mouse-out.
The final question raised is whether each arc should be drawn on individual canvases and cleared individually or if there is a more efficient method to achieve this effect?