Холст не рисует линию, где он сказал так - PullRequest
Новая
       1

Холст не рисует линию, где он сказал так

1 голос
/ 01 апреля 2012

У меня странное поведение по холсту, я пытаюсь нарисовать путь на холсте, используя мышь, как при свободном рисовании, холст правильно рисует линию по координате X, но Y начинает правильно, а затем ускользает, когда мышь движется вниз, что я делает неправильно или отсутствует? 

<html>
<script>
window.onload = function() {
        var offset = function(obj) {
            var curleft = 0, curtop = 0;
            if (obj.offsetParent) {
                do {
                    curleft += obj.offsetLeft;
                    curtop += obj.offsetTop;
                } while (obj = obj.offsetParent);
                return { x: curleft, y: curtop };
            }
            return undefined;
        }
        var canvas = document.getElementById("d");
        var context = canvas.getContext("2d");
        context.fillStyle = "#fff";
        context.fillRect(0, 0, 300, 300);
        var draw = false;
        var pos = offset(canvas);
        canvas.onmousemove = function(e) {
            if (draw == false) { return; }
            var x = e.pageX - pos.x;
            var y = e.pageY - pos.y;
            console.log(x,y);
            context.lineTo(x, y);
            context.stroke();
        }
        canvas.onmousedown = function(e) {
            draw = true;
            var x = e.pageX - pos.x;
            var y = e.pageY - pos.y;
            context.fillStyle = "#000";
            context.beginPath();
            context.moveTo(x, y);
        }
        canvas.onmouseup = function(e) {
            draw = false;
        }
}
</script>
<style>
#d { border: 1px solid black; width: 300px; height: 300px; }
</style>
<canvas id="d"></canvas>
</html>

Спасибо

1 Ответ

2 голосов
/ 01 апреля 2012

Кажется, вам нужно добавить атрибуты ширины / высоты на ваш холст.Я попытался на скрипке, и это сработало.

...