LINUX.ORG.RU

Ткните носом

 , ,


0

1

На днях решил освоить рисование на канвасе и споткнулся об интерактивность. Решил отслеживать события движения мыши над канвасом и менять картинку по событию.

Собственно код:

<!DOCTYPE HTML>
<html>
<head>
    <script>
    var ctx;
    var canvas;
    function handler(event){
            ctx.clearRect(0,0,canvas.width, canvas.height);
            ctx.beginPath();
            ctx.moveTo(0, 0);
            ctx.lineTo(event.pageX - this.offsetLeft, event.pageY - this.offsetLeft);
            ctx.closePath();
            ctx.strokeStyle = 'red';
            ctx.stroke();
        }
    function main(){
        canvas = document.getElementById('canvas');
        ctx = canvas.getContext('2d');
        
        canvas.onmouseover = handler;
        canvas.onmousemove = handler;
    };
    </script>
</head>
<body onload="main()">
    <canvas id="canvas" style="display: block; position: absolute; width: 200px; height: 200px; border: solid black 1px; top: 10px; left: 10px;">upgrade your browser!</canvas>
</body>
</html>

По моему разумению, в результате должна была получиться красная линия, которая тянется от верхнего левого угла канваса до курсора. Но почему-то конец линии не совпадет с курсором. ЧЯДНТ? ткните носом

Ответ на: комментарий от fluorite

к сожалению, результат тот же... конец линии ниже и левее курсора

EugeneBas ★★ ()
Последнее исправление: EugeneBas (всего исправлений: 1)

Возможно, проще будет не работать с canvas напрямую, а взять библиотеку типа KineticJS?

anonymous_coward ()

по какой-то причине, я не очень углублялся, размер «canvas» следует задавать только через атрибуты

<canvas width="200" height="200"></canvas>
тогда координаты экрана и «canvas» будут согласованы

mta88 ()
Ответ на: комментарий от anonymous_coward

спасибо, как-нибудь попробую, но сейчас мне хочется без оберток с этим разобраться

EugeneBas ★★ ()
Ответ на: комментарий от mta88

да, спасибо, причина была именно в этом

а есть догадки, почему css-свойства портят всю малину?

EugeneBas ★★ ()
Ответ на: комментарий от EugeneBas

а есть догадки, почему css-свойства портят всю малину?

нашел три абзаца начиная с этого
атрибуты width и height задают только размер битмапа (не css-размеры)
по умолчанию css-размеры совпадают с 'width' и 'height'
если же css-размеры заданы отдельно, то картинка растягивается, как для 'img'

mta88 ()
Вы не можете добавлять комментарии в эту тему. Тема перемещена в архив.