Хотел сделать очистку холста
но начиная рисовать по холсту, после его очистки, появляется прошлый рисунок. Как сделать чтобы он не появлялся?
<!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>
Вопрос снимаю, надо было указывать начало и конец путей