попытался сделать рисование, с помощью линий
<!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> Но если рисуешь и выходишь за рамки холста, то при очередном входе в холст рисование продолжается с того места, где я из него вышел и притом нажатие ЛКМ не нужно. Помогите пожалуйста исправить баг |
добавьте
canvas.addEventListener("mouseout",function(){canvas.pr=0},false); Я в хроме попробовал-он плохо рисует-а у Вас как? |
Спасибо) Аналогично.. такое чувство, что даже в IE 9 и Лисе быстрее работает.
Там ещё бага осталось, если рисуешь и выходишь за рамки холста, то при очередном входе в холст рисование не происходит с места входа |
Цитата:
|
вставил, но баг есть этот
Цитата:
Как в paint хотелось бы-выходишь за рамки, потом входишь и продолжаешь рисовать с места входа |
У меня он вообще почти не рисует-а должен легко рисовать-никак не пойму где ошибка-вроде все правильно сделали
|
+ ещё бага, если во время рисования выйти за рамки и выделить что нить, то потом войдя в холст можно щёлкнуть на любом месте, немного провести курсор(в этот момент курсор меняется на зачёркнутый круг) и отпустить ЛКМ и тогда тоже рисует, просто водя курсор по холсту, без зажатия ЛКМ.
|
Хром в консоли такое пишет
Цитата:
|
Вот так попробуйте-рисует нормально-а с багами позже-сейчас главное чтобы рисовал
<!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> |
Рисовать то рисует, лучше даже вроде, но мне кажется что всё же не так быстро как надо. Хорошо видно когда линию рисуешь, что рисунок не поспевает за курсором
|
Часовой пояс GMT +3, время: 01:27. |