Forward
Reverse
Drag the sliders to change offset , line length and line gap values.
HTML
<canvas id="my_canvas" width="400" height="200" style="border:2px solid #000000;"></canvas>
<div id='offset_text'></div>
<div id="slider_offset"></div>
<div id='line_text'></div>
<div id="slider_line"></div>
<div id='gap_text'></div>
<div id="slider_gap"></div>
<div id='speed_text'></div>
<div id="slider_speed"></div>
<br><div class='radio-inline'>
<label><input type='radio' name='direction' id='r1' value='forward' checked>Forward</label>
</div>
<div class='radio-inline'>
<label><input type='radio' name='direction' id='r2' value='reverse' >Reverse</label>
</div>
var my_canvas=$('#my_canvas').get(0)
var gctx = my_canvas.getContext("2d");
var direction='forward';
var o_speed=50;
var x=100;
var y=100;
var offset=3;
var line=5;
var gap=5;
my_function=function my_function(){
gctx.clearRect(0, 0, my_canvas.width,my_canvas.height);
gctx.beginPath();
gctx.setLineDash([line,gap]);
gctx.lineDashOffset = offset;
gctx.strokeRect(20, 20, 330, 150);
gctx.stroke();
$( "#speed_text" ).html("speed = " + o_speed );
$( "#line_text" ).html("line length = " + line );
$( "#gap_text" ).html("line gap = " + gap );
}
//////////////////
my_march=function my_march(){
if(direction=='forward'){
offset--;
if (offset <1) {
offset = 10;
}
}else{
offset++;
if (offset >10) {
offset = 0;
}
}
my_function();
setTimeout(my_march, o_speed);
}
///////////////////////////
$( "#slider_speed" ).slider({
orientation:'horizontal',
min:0,
max:100,
step:1,
animate:'slow',
value:o_speed,
disabled:false,
slide: function(event, ui) {
o_speed=ui.value;
my_function()
}
});
///////////////////////////////
///////////////////////////
$( "#slider_line" ).slider({
orientation:'horizontal',
min:0,
max:400,
step:1,
animate:'slow',
value:line,
disabled:false,
slide: function(event, ui) {
line=ui.value;
my_function()
}
});
///////////////////////////////
///////////////////////////
$( "#slider_gap" ).slider({
orientation:'horizontal',
min:0,
max:400,
step:1,
animate:'slow',
value:gap,
disabled:false,
slide: function(event, ui) {
gap=ui.value;
my_function()
}
});
///////////////////////////////
$("input:radio[name=direction]").click(function() {
direction=$(this).val();
})
///////////
my_function()
my_march();