Не работает рисовалка canvas
Что-то тут сам попытался написать рисовалку, не очень работает, а точнее совсем не работает
function startDraw(tool){
var cnvs = document.getElementById('cnvs');
var ctx = cnvs.getContext('2d');
/*Список инструментов*/
var brush; //кисть
var purge; //ластик
/*Список инструментов*/
ctx.strokeStyle = '#000';
var startDraw = false;
cnvs.addEventListener('mousedown',function(tool) { //нажали на лкм
// body...
tool = true;
startDraw = true;
ctx.beginPath();
},false);
cnvs.addEventListener('mouseup',function(tool) { //отпустили лкм
// body...
tool = false;
startDraw = false;
},false);
cnvs.addEventListener('mousemove',function(e,tool) { //отпустили лкм
var x,y;
x=e.pageX;
y=e.pageY;
if(startDraw==true){
switch(tool){
//Кисть
case 'brush':
ctx.lineTo(x - cnvs.offsetLeft, y - cnvs.offsetTop);
ctx.moveTo(x - cnvs.offsetLeft, y - cnvs.offsetTop);
ctx.stroke();
}//Кисть
}
},false);
}
<body onload="startDraw('brush');">
<canvas id="cnvs" width="800" height="500"></canvas>
|
IVAAAAN,
function startDraw(){
var startDraw;
}
:D |
Не помогло
|
так я и думал, но как поправить? :-?
|
:-? ну как же, помогите, срочно :)
|
ну мне бы в моем только коде ошибки пофискить, а не чужой копипастить :)
|
да вот это то я сделал, просто рисовалку то. но не понимаю как мне лучше сделать выбор инструментов, ластик например. помогите советом, а :)
|
Никто ничего не посоветует? :-?
|
Цитата:
когда они запускаются, они получают событие а вы объявили их с переменной "tool" и думаете, что они получат тот же "tool" что и функция "startDraw" сохраните "tool" в замыкании функции "startDraw" и используйте его оттуда
function startDraw(tool) {
var my_tool = tool; // вот здесь
...
cnvs.addEventListener('mousemove', function(e) {
...
switch(my_tool) {
...
}
...
});
}
но даже переменная "my_tool" необязательна
function startDraw(tool) {
...
cnvs.addEventListener('mousemove', function(e) {
...
switch(tool) {
...
}
...
});
}
|
Спасибо. Но теперь когда я выбираю другой инструмент, то их становится как бы два. Например я одновременно рисую и стираю
|
Цитата:
вряд ли так кто сможет помочь:) |
switch(tool){
case 'brush':
ctx.lineTo( x, y );
ctx.stroke();
ctx.beginPath();
ctx.moveTo( x, y );
break;
case 'purge':
ctx.clearRect(x, y, ctx.lineWidth, ctx.lineWidth);
break;
}
|
Ну а выбираю инструмент я так:
startDraw('purge'); onclick="startDraw('brush');" и т.д |
Цитата:
наверно вы создаете новый обработчик а старый не удаляете либо удаляйте старый, либо вообще перенесите tool в какую-нибудь более-менее глобальную переменную а обработчик используйте только один |
Вы не поняли, вот как происходит смена инструмента:
<button onclick="startDraw('brush');">Кисть</button> <button onclick="startDraw('purge')">Ластик</button> После того как я выберу другой, то получается что два инструмента одновременно работают) |
Цитата:
при нажатии на кнопку запускается функция 'startDraw' а внутри нее добавляются новые обработчики событий с помощью 'addEventListener' старые не исчезнут просто так я уже написал что можно сделать |
Спасибо, сделал как Вы описали во втором варианте :)
|
| Часовой пояс GMT +3, время: 11:24. |