I have written a simple linked list visualization program in JavaScript:
I am just a beginner in html5 canvas. I am pretty much satisfied with how it works, but I´d like to know if I made some things, that could have been done better.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<canvas id="canvas"></canvas>
<script>
var Shape=Shape || {
x:0,
y:0,
w:0,
h:0,
t:0,
rects:[],
create:function(){
var obj=Object.create(this);
return obj;
},
add:function(x,y,w,h,t){
this.x=x;
this.y=y;
this.w=w;
this.h=h;
this.t=t;
this.rects.push({x,y,w,h,t});
},
draw:function(context,text){
for (var i in this.rects) {
oRec = this.rects[i];
context.fillStyle = 'red'
context.fillRect(oRec.x, oRec.y, oRec.w, oRec.h);
context.fillText(oRec.t, oRec.x,oRec.y);
context.beginPath();
context.moveTo(oRec.x+oRec.w/2,oRec.y+oRec.h/2);
context.lineTo(oRec.x+100,oRec.y+12);
context.stroke();
context.closePath();
if(i==this.rects.length){
}
}
}
};
window.onload=function(){
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var h=canvas.width=window.innerWidth;
var w=canvas.height=window.innerHeight;
var node=Shape.create();
node.add(10, 100, 25, 25,1)
node.add(100,100, 25, 25,2)
node.add(200,100, 25, 25,3)
node.add(300,100, 25, 25,4)
node.add(400,100, 25, 25,5)
node.add(500,100, 25, 25,6)
node.draw(ctx);
};
</script>
</body>
</html>
add
method. Instead, just have a draw function that accepts an array of objects, and draws them. \$\endgroup\$