Hi all,
mousedown and mouseup is not working in canvas
index.html
Code:
<body width="100%" height="100%">
<header>
<h1>Drawing in Canvas</h1>
</header>
<canvas id="game" width="768" height="400">Sorry, your web browser does not support Canvas content.
</canvas>
<script src="js/jquery-1.10.2.min.js"></script>
<script src="js/logic.js"></script> </body>
logic.js
Code:
var untangleGame={
circle: [],
thinLineThickness: 1,
lines: []
};
function Circle(x,y,radius){ this.x=x;
this.y=y;
this.radius=radius;
}
function Line(startPoint,endPoint,thickness){ this.startPoint=startPoint; this.endPoint=endPoint; this.thickness=thickness;
}
function drawcircle(ctx,x,y,radius){ ctx.fillStyle="rgba(200,200,100,.9)"; ctx.beginPath(); ctx.arc(x,y,radius,0,Math.PI*2,true); ctx.closePath();
ctx.fill();
}
function connectCircles(){ untangleGame.lines.length = 0;
for(var i=0;i<untangleGame.circle.length;i++){ var startPoint=untangleGame.circle[i]; for(var j=0;j<i;j++){
var endPoint=untangleGame.circle[j]; untangleGame.lines.push(new Line(startPoint,endPoint,untangleGame.thinLineThickness)); }
}
}
function drawLine(ctx,x1,y1,x2,y2,thickness){ ctx.beginPath(); ctx.moveTo(x1,y1); ctx.lineTo(x2,y2); ctx.lineWidth=thickness; ctx.strokeStyle="#cfc"; ctx.stroke(); }
function clear(ctx){ ctx.clearRect(0,0,ctx.canvas.width,ctx.canvas.height); }
$(function(){
var canvas=document.getElementById('game'); var ctx=canvas.getContext('2d');
var circleRadius=10;
var width=canvas.width;
var height=canvas.height;
var circlesCount=5;
for(var i=0;i<circlesCount;i++){
var x=Math.random()*width;
var y=Math.random()*height; drawcircle(ctx,x,y,circleRadius); untangleGame.circle.push(new Circle(x,y,circleRadius)); }
connectCircles(); $("#game").mousedown(function(e){ var canvasPosition=$(this).offset(); var mouseX=e.layerX || 0;
var mouseY=e.layerY || 0;
for(var i=0;i<untangleGame.circle.length;i++){ var circleX=untangleGame.circle[i].x; var circleY=untangleGame.circle[i].y; var radius=untangleGame.circle[i].radius; if(Math.pow(mouseX-circleX,2)+Math.pow(mouseY-circleY,2)<Math.pow(untangleGame.circleRadius,2)) { untangleGame.targetCircle=i; break; } } }); $("#game").mousemove(function(e){ if(untangleGame.targetCircle !== undefined){ var canvasPosition=$(this).offset(); var mouseX=e.layerX || 0; var mouseY=e.layerY || 0; var radius=untangleGame.circle[untangleGame.targetCircle].radius; untangleGame.circle[untangleGame.targetCircle]=new Circle(mouseX,mouseY,radius); } connectCircles(); }); $("#game").mouseup(function(e){ untangleGame.targetCircle=undefined; }); setInterval(gameloop,30); }); function gameloop(){ var canvas=document.getElementById('game'); var ctx=canvas.getContext('2d'); clear(ctx); for(var i=0;i<untangleGame.lines.length;i++){ var line=untangleGame.lines[i]; var startPoint=line.startPoint; var endPoint=line.endPoint; var thickness=line.thickness; drawLine(ctx,startPoint.x,startPoint.y,endPoint.x,endPoint.y,thickness); } for(var i=0;i<untangleGame.circle.length;i++){ var circle=untangleGame.circle[i]; drawcircle(ctx,circle.x,circle.y,circle.radius); } }
style.css
Code:
canvas { background: #333; }