Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > JavaScript: Общие вопросы > Как "рисовать" на экране с помощью JS?

Автор: R.M. 15.12.2005, 03:04

А можно ли на JS сделать возможность рисования? Т.е. я гдето видел например можно зажать кнопку на какомто объекте и таскать его за курсором, и натолкнулся на мысль что значит наверно возможно рисовать просто зажимая курсор (как в PaintBrush) smile

только в определённом месте и без всяких супер наворотов, рекльно ли это и вообще интересно комунибудь? smile

Автор: Ciber SLasH 15.12.2005, 03:37

Это реально, но тормозить будет просто ужасть как...
А пример рисования можно посмотреть тут: http://forum.vingrad.ru/index.php?showtopic=53487
тебе нужно будет написать в том элементе, где будет рисование onMouseMove='MouseMove(event)' и определить функцию:

Код

function MouseMove(ev){
var evt = ev || window.event;
var mx = evt.clientX;  // X-координата грызуна
var my = evt.clientY;  // Y-координата грызуна

}

и вписать соответствующие действия отрисовки в зависимости от координат грызуна.

Автор: R.M. 15.12.2005, 04:38

А можно ли посмотреть на эту функцию в действии? Ну просто чтобы она ставила пиксель в evt.clientX; и evt.clientY; при onMouseMove

Автор: Ciber SLasH 15.12.2005, 05:30

Код

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content='text/html; charset=windows-1251'>
<meta name="Generator" content='EditPlus 2.12'>
<meta name="Author" content='Ciber SLasH'>
<title>JavaScript :: Крыса-карандаш</title>
<script type='text/javascript'>
function MouseMove(ev){
//var logs = document.getElementById("log");
var evt = ev || window.event;
var mx = evt.clientX;
var my = evt.clientY;
var risunok = document.createElement("DIV");

    with (risunok.style) {
        width = "2px";
        fontSize = "2px";
        backgroundColor = "black";
        position = "absolute";
        left = mx;
        top = my;
    }
    document.body.appendChild(risunok);
}
</script>
</head>

<body onMouseMove='MouseMove(event)'>
</body>
</html>

Автор: R.M. 15.12.2005, 06:05

Ciber SLasH
Спасибо, прикольно, жалко только без клика рисует smile