We have seen marching ants in most of the designing tools, like marquee tool or using any selection tools. we can see dotted lines on click and dragging our the canvas. Same marquee or marching ant effect we have recreated here using HTML5 and javascript.
HTML5 Canvas Mouse Events using javascript:
Before viewing the entire code for marching ants or marquee tool in HTML5. View this tutorial on how to use or interact with mouse events on html5 canvas element.
Entire Code for html5 Marching ants:
Image used for ant: 
<!doctype HTML>
<html>
<head>
<title>Marching ants | marquee tool in HTML5</title>
<style id="basics">
/* Basic standard module */
.mod {
margin:.6em auto;
padding:2px;
}
.mod .bd {
cursor:pointer;
text-align:center;
height:99%;
}
</style>
<style>
#testTop{
background-color:#666666;
}
.marchingants2 {
background:url(images/ants.gif) repeat-y -6px -4px;
padding:0 2px;
position:relative;
}
.marchingants2 .inner {
background:url(images/ants.gif) repeat-x 0 -6px;
padding:2px 0 0 0;
height:100%;
}
.marchingants2 .hd {
background:url(images/ants.gif) repeat-y 0 0;
height:100%;
margin-bottom:4px;
position:absolute;
right:0;
width:2px;
}
.marchingants2 .ft {
background:url(images/ants.gif) repeat-x 0 0;
height:2px;
}
.marchingants2,
.marchingants2 .inner,
.marchingants2 .hd,
.marchingants2 .ft {
-webkit-animation-duration: 0.3s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
}
.marchingants2 {
-webkit-animation-name: march-up;
}
.marchingants2 .inner {
-webkit-animation-name: march-right;
}
.marchingants2 .hd {
-webkit-animation-name: march-down;
}
.marchingants2 .ft {
-webkit-animation-name: march-left;
}
@-webkit-keyframes march-right {
from {
background-position-x: 0;
}
to {
background-position-x: 8px;
}
}
@-webkit-keyframes march-left {
from {
background-position-x: 8px;
}
to {
background-position-x: 0;
}
}
@-webkit-keyframes march-up {
from {
background-position-y: 8px;
}
to {
background-position-y: 0;
}
}
@-webkit-keyframes march-down {
from {
background-position-y: 0;
}
to {
background-position-y: 8px;
}
}
</style>
</head>
<body onLoad="init()">
<canvas id="canvas1" width="500" height="300" style="border: 1px solid black;">
This text is displayed if your browser does not support HTML5 Canvas.
</canvas>
<div style="position: absolute;top: 10px; left: 10px; width: 0px; height: 0px; z-index: 5;" class="mod marchingants2" id="testAnt">
<div class="inner">
<div class="hd"></div>
<div class="bd"></div>
<div class="ft"></div>
</div>
</div>
<div style="font-family: Verdana; font-size: 12px;">
<p>Click and Drag over the Canvas above.</p>
<p><a href="http://simonsarris.com/blog/510-making-and-moving-selectable-shapes-on-an-html5-canvas-updated">link to tutorial</a></p>
<p>By <a href="http://www.designscripting.com">designscripting.com</a></p>
</div>
<script type="text/javascript">
function CanvasState(canvas)
{
this.canvas = canvas;
this.width = canvas.width;
this.height = canvas.height;
this.ctx = canvas.getContext('2d');
// This complicates things a little but but fixes mouse co-ordinate problems
// when there's a border or padding. See getMouse for more detail
var stylePaddingLeft, stylePaddingTop, styleBorderLeft, styleBorderTop;
if (document.defaultView && document.defaultView.getComputedStyle)
{
this.stylePaddingLeft = parseInt(document.defaultView.getComputedStyle(canvas, null)['paddingLeft'], 10) || 0;
this.stylePaddingTop = parseInt(document.defaultView.getComputedStyle(canvas, null)['paddingTop'], 10) || 0;
this.styleBorderLeft = parseInt(document.defaultView.getComputedStyle(canvas, null)['borderLeftWidth'], 10) || 0;
this.styleBorderTop = parseInt(document.defaultView.getComputedStyle(canvas, null)['borderTopWidth'], 10) || 0;
}
// Some pages have fixed-position bars (like the stumbleupon bar) at the top or left of the page
// They will mess up mouse coordinates and this fixes that
var html = document.body.parentNode;
this.htmlTop = html.offsetTop;
this.htmlLeft = html.offsetLeft;
this.dragging = false;
this.mx = 0;
this.my = 0;
// This is an example of a closure!
// Right here "this" means the CanvasState. But we are making events on the Canvas itself,
// and when the events are fired on the canvas the variable "this" is going to mean the canvas!
// Since we still want to use this particular CanvasState in the events we have to save a reference to it.
// This is our reference!
var myState = this;
//fixes a problem where double clicking causes text to get selected on the canvas
canvas.addEventListener('selectstart', function(e) { e.preventDefault(); return false; }, false);
// Up, down, and move are for dragging
canvas.addEventListener('mousedown', function(e) {
var mouse = myState.getMouse(e);
this.mx = mouse.x;
this.my = mouse.y;
var ant = document.getElementById('testAnt');
ant.style.left = (this.mx+10)+"px";
ant.style.top = (this.my)+"px";
ant.style.width = (0)+"px";
ant.style.height = (0)+"px";
myState.dragging = true;
}, true);
canvas.addEventListener('mousemove', function(e) {
if (myState.dragging)
{
var mouse = myState.getMouse(e);
myState.clear(e);
var width = mouse.x - this.mx;
var height = mouse.y - this.my;
var ant = document.getElementById('testAnt');
ant.style.left = (this.mx+10)+"px";
ant.style.top = (this.my)+"px";
ant.style.width = (width-5)+"px";
ant.style.height = (height-5)+"px";
}
}, true);
canvas.addEventListener('mouseup', function(e) {
myState.dragging = false;
}, true);
// double click for making new shapes
canvas.addEventListener('dblclick', function(e) {
myState.clear(e);
}, true);
}
CanvasState.prototype.clear = function() {
this.ctx.clearRect(0, 0, this.width, this.height);
}
CanvasState.prototype.getCanvasHandle = function(e) {
return this.ctx;
}
// Creates an object with x and y defined, set to the mouse position relative to the state's canvas
// If you wanna be super-correct this can be tricky, we have to worry about padding and borders
CanvasState.prototype.getMouse = function(e) {
var element = this.canvas, offsetX = 0, offsetY = 0, mx, my;
// Compute the total offset
if (element.offsetParent !== undefined) {
do {
offsetX += element.offsetLeft;
offsetY += element.offsetTop;
} while ((element = element.offsetParent));
}
// Add padding and border style widths to offset
// Also add the <html> offsets in case there's a position:fixed bar
offsetX += this.stylePaddingLeft + this.styleBorderLeft + this.htmlLeft;
offsetY += this.stylePaddingTop + this.styleBorderTop + this.htmlTop;
mx = e.pageX - offsetX;
my = e.pageY - offsetY;
// We return a simple javascript object (a hash) with x and y defined
return {x: mx, y: my};
}
function init() {
var myCanvas = new CanvasState(document.getElementById('canvas1'));
}
</script>
</body>
</html>
Thanks tohttp://sunpig.com for CSS3 marchingants code and Image.
Related posts: