Показать сообщение отдельно
  #11 (permalink)  
Старый 30.05.2012, 22:47
Интересующийся
Отправить личное сообщение для zm_sansan Посмотреть профиль Найти все сообщения от zm_sansan
 
Регистрация: 26.05.2012
Сообщений: 26

попытался сделать рисование, с помощью линий
<!DOCTYPE html><html lang="ru">
<head>
<meta charset="utf-8" />
<title>canvas</title>
<!--[if lt IE 9]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>

<body onLoad="draw_cl()">
<header>
<h1 align="center">canvas!!!</h1>
</header>
<center>
<canvas id="b" height="0" width="0" style="border: 2px dashed red"></canvas>
<img href="" name="picture">
</center>
</body>
</html>

<script type="text/javascript">
var canvas = document.getElementById("b");
canvas.pr=0;
canvas.width=500; //ширина холста
canvas.height=375; //высота холста
var context = canvas.getContext("2d");
function draw_cl(){
        //получаем позицию курсора относительно холста
        function mousePageXY(e){
        var x = 0, y = 0;
        if (!e) e = window.event;
        if (e.pageX || e.pageY)
        {
                x = e.pageX;
                y = e.pageY;
        }
        else if (e.clientX || e.clientY)
        {
                x = e.clientX + 
                (document.documentElement.scrollLeft || document.body.scrollLeft) - 
                document.documentElement.clientLeft;
                y = e.clientY + 
                (document.documentElement.scrollTop || document.body.scrollTop) - 
                document.documentElement.clientTop;
        }
        x -= canvas.offsetLeft;
        y -= canvas.offsetTop;
        return {"x":x, "y":y};
        }
   	    
        canvas.addEventListener("mousemove",paint,false);
		canvas.addEventListener("mousedown",function(){canvas.pr=1},false); 
		canvas.addEventListener("mouseup",function(){canvas.pr=0},false);
		document.n=0;

        function paint(e){
		if(!canvas.pr){document.n=0; return;}		
		var mc = mousePageXY(e); 
		if (document.n==0) {document.back=mc; document.n=1}
		var back=document.back;
		context.moveTo(document.back.x,document.back.y);
		context.lineTo(mc.x,mc.y);
		context.stroke();
	    document.back = mc;	
        }       
		
}
</script>

Но если рисуешь и выходишь за рамки холста, то при очередном входе в холст рисование продолжается с того места, где я из него вышел и притом нажатие ЛКМ не нужно. Помогите пожалуйста исправить баг
Ответить с цитированием