Начал изучать js, поставил для себя цель написать техническую онлайн программку с графическим интерфейсом, первым делом взялся за основные функции интерфейса (построение схем)
Ниже скрипт работает не так как нужно, при каждом нажатии кнопок мыши количество выполнений функции line (cor_x1, cor_y1, cor_x, cor_y) растет в геометрической прогрессии
Кто может "разжевать" в чем ошибка
ps google помочь не смог
| Код |
<html>
<head>
<link rel="stylesheet" href="css.css" type="text/css" media="screen" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="application/javascript">
$(function() {
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
ctx.clearRect(0,0,1000,1000);
ctx.fillStyle = "rgba(0,25,0,0.1)";
for(i=1;i<2000;i+=10)
ctx.fillRect (i, 0, 1, 2000);
for(i=1;i<2000;i+=10)
ctx.fillRect (0, i, 2000, 1);
$(document).mousedown(function(e){
// line (e.pageX, e.pageY, 32, 345);
var cor_x=e.pageX;
var cor_y=e.pageY;
$(document).mouseup(function(z){
var cor_x1=z.pageX;
var cor_y1=z.pageY;
line (cor_x1, cor_y1, cor_x, cor_y);
});
})
function line (x1, y1, x2, y2) {
var canvas = document.getElementById("canvas");
var ctxt = canvas.getContext("2d");
var x3 = x1;
// ctxt.clearRect(0,0,1000,1000);
ctxt.beginPath();
ctxt.moveTo(x1, y1);
ctxt.lineTo(x2, y2);
ctxt.closePath();
ctxt.stroke();
var cor_x1=null, cor_y1=null, cor_x=null, cor_y=null;
};
});
</script>
</head>
<body >
<canvas id="canvas" width="1000" height="1000"></canvas>
<canvas2 id="canvas2" width="1000" height="1000"></canvas2>
</body>
</html>
|
|