Если я увеличиваю ширину линии до больших значений, например 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()" style='height:300px;overflow:hidden'>
<center>
<canvas id="b" height="0" width="0" style="border: 2px dashed red;"></canvas>
<br>
Ширина линии
<input id="paint_size" type="text" value="1" onChange="context.lineWidth = document.getElementById('paint_size').value;"><br>
</center>
<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 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;context.closePath();}, false); //Нажатая кнопка мыши отпущена --> canvas.lkm=0;canvas.oldLine=0
canvas.addEventListener("mouseout", function () {canvas.oldLine = 0}, false); //выход мыши с холста --> canvas.oldLine=0
canvas.addEventListener("mousemove", paint, false); //передвижении мыши по холсту --> вызов функции рисования
canvas.addEventListener("click", function () {context.beginPath();}, false); //передвижении мыши по холсту --> вызов функции рисования
//функция рисования
function paint(e){
context.strokeStyle = 'red'; //цвет линии
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>