Форум

vadim5june · #21 (**permalink**) 31.05.2012, 00:04

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

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

У меня в хроме очень быстро-

zm_sansan · #22 (**permalink**) 31.05.2012, 00:07

Всего быстрее в лисе работает, можно сказать идеально. На втором месте IE9, на третьем Хром.

vadim5june · #23 (**permalink**) 31.05.2012, 00:09

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

Всего быстрее в лисе работает, можно сказать идеально. На втором месте IE9, на третьем Хром.

Ну меня как в хроме устраивает-я сейчас спать ложусь-если еще баги заметите напишите плиз-а то я этой прогой хочу пользоваться-будет обоим польза
Завтра исправлю

Deff · #24 (**permalink**) 31.05.2012, 00:58

zm_sansan,
В Opere отлично рисует, линия не отрывается от курсора - тестил в 9.5, 10. 11.52 (11.6 - не тестирую - Личные счёты

vadim5june · #25 (**permalink**) 31.05.2012, 08:43

Исправил там свой вариант(который клон Вашего)-в хроме баги пропали
Пришлось запретить выделение на странице

zm_sansan · #26 (**permalink**) 31.05.2012, 09:44

Код можете скинуть? я потестю

vadim5june · #27 (**permalink**) 31.05.2012, 12:28

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

Код можете скинуть? я потестю

А сверху где я писал-там исправил
на 2 странице в 22-50
Проблема с постоянным откликом функции на событие
потом нужно фигуры рисовать-прямоугольник -овал-прямую итд
само по себе это не сложно(прямоугольник у меня есть могу скинуть) но если объединять с другими инструментами то фигуры нужно сначало рисовать в другом канвасе-потому что там постоянно стираем все
а по событию mouseup переносить в основной
так же нужна программа для запоминания всей истории и желательно кнопки undo rendo

zm_sansan · #28 (**permalink**) 31.05.2012, 18:39

да, можете скинуть, хотя как реализовать я в уме представляю

vadim5june · #29 (**permalink**) 31.05.2012, 21:18

Прямоугольник

<!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:600px;overflow:hidden;'>
<center>
<canvas id="b" height="0" width="0" 
style="border: 2px dashed 
red"></canvas>
</center>
<br>4444444444444444444<br>
<div id=d></div>
<script type="text/javascript">
var canvas = document.getElementById("b");
canvas.pr=0;
canvas.mPoint=[];
canvas.width=500; //ширина холста
canvas.height=150; //высота холста
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;
document.getElementById('d').innerHTML=canvas.pr;},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;}else{var 
old=canvas.oldLine;context.strokeStyle='red';
clearCanvas(e);context.strokeRect(old.x,old.y,mc.x-old.x,mc.y-old.y);
}
     }
};
</script>
</body>
</html>

zm_sansan · #30 (**permalink**) 05.06.2012, 18:03

Хотел сделать очистку холста
но начиная рисовать по холсту, после его очистки, появляется прошлый рисунок. Как сделать чтобы он не появлялся?

<!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()" style='height:300px;overflow:hidden'>
<center>
<canvas id="b" height="0" width="0" style="border: 2px dashed red;"></canvas>
</center>
<br>11111111111111
<br>
<input type="button" value="Очистить" onClick="clear_canvas()">
<script type="text/javascript">
document.onselectstart=new Function("return false"); //запрет выделения
document.ondragstart=new Function("return false"); //запрет перетаскивания

var canvas = document.getElementById("b");
canvas.lkm=0; //нажатие ЛКМ
canvas.width=500; //ширина холста
canvas.height=400; //высота холста
var context = canvas.getContext("2d");

function clear_canvas(){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("mousedown",function(){canvas.lkm=1},false); //нажатие ЛКМ на холсте --> canvas.lkm=1
	document.addEventListener("mouseup",function(){canvas.lkm=0;canvas.oldLine=0;},false); //Нажатая кнопка мыши отпущена --> canvas.lkm=0;canvas.oldLine=0
	canvas.addEventListener("mouseout",function(){canvas.oldLine=0},false); //выход мыши с холста --> canvas.oldLine=0
	canvas.addEventListener("mousemove",paint,false); //передвижении мыши по холсту --> вызов функции рисования

	//функция рисования
	function paint(e){
		context.strokeStyle = 'red'; //цвет линии
		context.lineWidth=2; //ширина линии
		
		if (!canvas.lkm) return; //canvas.lkm==0 --> прерываем функцию рисования
		
		var mc = mousePageXY(e); //позиция мыши
		
		if (!canvas.oldLine){ //canvas.oldLine == 0
			canvas.oldLine=mc; //запоминаем где мышь вышла с холста. чтоб не было равно нулю? может лучше оптимальней сделать, в смысле логичней... 
			return; //прерываем функцию рисования
		}
		else{ //canvas.oldLine != 0 --> рисуем
			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>

Вопрос снимаю, надо было указывать начало и конец путей

Форум

Справочник

Discord чат

Курсы javascript