|
Проблема с постоянным откликом функции на событие
При проведении курсора по холсту должна рисоваться точка, в текущей позиции курсора. И таким образом рисуется какая-нибудь кривая.
Но рисование точки производится однократно, только при наведении курсора на холст. Вот не знаю как заставить откликаться функцию на событие постоянно. Т.е. надо чтобы было так - я вожу курсором над холстом, и рисуется кривая таким образом Пожалуйста, помогите) Вот код <!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.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("mouseover",paint,false); //добавляем события клика по холсту //рисуем function paint(e){ var mc = mousePageXY(e); context.fillRect(mc.x-2.5, mc.y-2.5, 2, 2); } } </script> Это к примеру я привёл наведение мыши, например, постоянное нажатие ЛКМ-ом, по холсту тоже не знаю как сделать, также фиксирует лишь однократное нажатие.. |
если поставите вместо "mouseover"-"mousemove"
рисовать будет постоянно а для того чтобы рисовало только тогда когда мы хотим добавляют еще события "mousedown" и "mouseup" тогда рисовать будем только тогда когда нажата левая клавиша мыши постоянно-как отпустим-рисование прекратилось- |
как добавить ещё событий сюда? canvas.addEventListener
("mouseover",paint,false); |
canvas.addEventListener
("mousemove",paint,false); canvas.addEventListener ("mousedown",paint,false); только функции нужно менять |
вот так рисует при нажатой левой клавиши мыши
<!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); function paint(e){if(!canvas.pr)return; var mc = mousePageXY(e); context.fillRect(mc.x-2.5, mc.y-2.5, 2, 2); } } </script> |
Цитата:
http://video.yandex.ru/users/hostjs-mybb2011/view/13/# Ксать скрол бар бы повыше а сanvas чуть уже |
Цитата:
Опера не установлена-в хроме нормально Хотя тормозить тут особенно нечему |
vadim5june,
Ну там заметно - что на вертикали(или при замедленном ведении) - линия получается четкая и жирная - при 45 градусной или росчерком - она капельно точечная Ща пробую в Хроме - В хроме существенно лучше, % на 20-30 и по скорости и по слитности, но на диагоналях и при скоростях 2- и более см/cек - тож капельничает |
Цитата:
если линию рисовать нужно использовать moveTo и lineTo а здесь они по событию mousemove просто выводят квадрат 2x2 |
Цитата:
|
Часовой пояс GMT +3, время: 01:05. |
|