Reputation: 83
Using canvas we can able to draw lines when mousemove. I need to know is it possible to draw lines without using canvas by mouse event in jquery.
Upvotes: 1
Views: 1233
Reputation: 4682
I think it is possible:
Use this:
<html>
<head>
<title> Bob the Painter </title>
<style type="text/css">
td{
width:10px; /*Change it As You want */
height:10px;
background:#ffffff;
border:0px;
cursor:crosshair;
}
</style>
<script type="text/javascript">
function drawLine(x){
x.style.background="#000000"; /* Use Color Picker for More Colors */
}
function drawmyTable(x,y){
var ground=document.getElementById("html");
var p="<table border=1 cellspacing=0 cellpadding=0>";
for(var i=0;i<x;i++){
p+="<tr>";
for(var j=0;j<y;j++){
p+="<td onMouseOver='drawLine(this);'></td>";
}
p+="</tr>";
}
p+="</table>";
ground.innerHTML+=""+p+"";
}
</script>
</head>
<body OnLoad="drawmyTable(50,50);" id="html">
</body>
</html>
It'll create a table with dimensions you specified and when you hover the cell in table it'll change its background color. When you move mouse it'll change the background color of path to black
.
ofcourse this isn't as much accurate that of <canvas>
but it is useful in older browsers.
Hope This'll Help you ! Cheers !!
Upvotes: 1