Форум

zm_sansan · #11 (**permalink**) 30.05.2012, 22:47

попытался сделать рисование, с помощью линий

<!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>

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

vadim5june · #12 (**permalink**) 30.05.2012, 23:04

добавьте

canvas.addEventListener("mouseout",function(){canvas.pr=0},false);

Я в хроме попробовал-он плохо рисует-а у Вас как?

zm_sansan · #13 (**permalink**) 30.05.2012, 23:12

Спасибо) Аналогично.. такое чувство, что даже в IE 9 и Лисе быстрее работает.
Там ещё бага осталось, если рисуешь и выходишь за рамки холста, то при очередном входе в холст рисование не происходит с места входа

vadim5june · #14 (**permalink**) 30.05.2012, 23:28

Сообщение от zm_sansan

Там ещё бага осталось, если рисуешь и выходишь за рамки холста, то при очередном входе в холст рисование не происходит с места входа

Так Вы вставили mouseout что я выше написал?-баг исчезнет

zm_sansan · #15 (**permalink**) 30.05.2012, 23:33

вставил, но баг есть этот

Цитата:

если рисуешь и выходишь за рамки холста, то при очередном входе в холст рисование не происходит с места входа.

(всё это время ЛКМ зажата, с момента выхода до момента очередного входа).
Как в paint хотелось бы-выходишь за рамки, потом входишь и продолжаешь рисовать с места входа

vadim5june · #16 (**permalink**) 30.05.2012, 23:38

У меня он вообще почти не рисует-а должен легко рисовать-никак не пойму где ошибка-вроде все правильно сделали

zm_sansan · #17 (**permalink**) 30.05.2012, 23:43

+ ещё бага, если во время рисования выйти за рамки и выделить что нить, то потом войдя в холст можно щёлкнуть на любом месте, немного провести курсор(в этот момент курсор меняется на зачёркнутый круг) и отпустить ЛКМ и тогда тоже рисует, просто водя курсор по холсту, без зажатия ЛКМ.

zm_sansan · #18 (**permalink**) 30.05.2012, 23:47

Хром в консоли такое пишет

Цитата:

event.layerX and event.layerY are broken and deprecated in WebKit. They will be removed from the engine in the near future.

vadim5june · #19 (**permalink**) 30.05.2012, 23:50

Вот так попробуйте-рисует нормально-а с багами позже-сейчас главное чтобы рисовал

<!DOCTYPE html><html lang="ru">
<head>
<meta charset="utf-8" />
<title>canvas</title>
<!--[if lt IE 9]><script 

src="http://html5shiv.googlecode.com/s

vn/trunk/html5.js"></script>
<![endif]-->
</head>
<body onLoad="draw_cl()" onselectstart='return false' style='height:300px;overflow:hidden'>
<center>
<canvas id="b" height="0" width="0" style="border: 2px dashed red"></canvas>
</center>
<br>11111111111111
<script type="text/javascript">
var canvas = document.getElementById("b");
canvas.pr=0;
canvas.mPoint=[];
canvas.width=500; //ширина холста
canvas.height=100; //высота холста
var context = canvas.getContext("2d");
function clearCanvas(){context.clearRect
(0,0,canvas.width,canvas.height)};
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); 
document.body.addEventListener("mouseup",function(){canvas.pr=0;canvas.oldLine=0;},false);
canvas.addEventListener("mouseout",function(){canvas.oldLine=0},false);
  function paint(e){
context.strokeStyle = 'red';
context.fillStyle='green';
context.lineWidth=2;
if(!canvas.pr)return;
       var mc = mousePageXY(e);
          if(!canvas.oldLine)
{canvas.oldLine=mc;return;context.beginPath();return;}else{
var old=canvas.oldLine;
//context.beginPath();
context.moveTo(old.x,old.y);
context.lineTo(mc.x,mc.y);
context.stroke();
//context.closePath();
canvas.oldLine=mc;
}
     }
};
</script>
</body>
</html>

zm_sansan · #20 (**permalink**) 31.05.2012, 00:00

Рисовать то рисует, лучше даже вроде, но мне кажется что всё же не так быстро как надо. Хорошо видно когда линию рисуешь, что рисунок не поспевает за курсором

Форум

Справочник

Discord чат

Курсы javascript