Не могу нарисовать мой круг из координат мыши при щелчке на холсте HTML5 - PullRequest
Новая
       4

Не могу нарисовать мой круг из координат мыши при щелчке на холсте HTML5

1 голос
/ 25 июля 2011

Я пытаюсь нарисовать красный круг, где щелкает моя мышь, но ничего не рисуется. Я могу следовать своим координатам x, y, которые я нажимаю. Если я положу постоянные значения для x, y в методе arc, отобразится круг. Что я делаю не так? 

           var currColor = "#FF0000";
              var currSize = 20;

             window.onload = function() {
            var theCanvas = document.getElementById('my_canvas');
            theCanvas.addEventListener("click", CircleOnClick, false);
        }

            function Cell(row, column) {
                    this.row = row;
                    this.column = column;
                    }

               function getCursorPosition(e) {

var x;
var y;
if (e.pageX != undefined && e.pageY != undefined) {
x = e.pageX;
y = e.pageY;
}
else {
x = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
y = e.clientY + document.body.scrollTop + document.documentElement.scrollTop;
}
var cell = new Cell(x, y);

return cell;
                }

                function CircleOnClick(e) {



var canvasElement = document.getElementById('my_canvas');
            if (canvasElement && canvasElement.getContext) {
                var ctx = canvasElement.getContext("2d");
                if (ctx) {

                    var cell = getCursorPosition(e);
                    var x = parseInt(cell.row);
                    var y = parseInt(cell.column);

                    //Start drawing
                    ctx.fillStyle=currColor;
                    ctx.beginPath();
                    console.log("x" + x);
                    console.log("y" + y);
                    console.log("Current color" + currColor);
                    console.log("Current size" + currSize);
                    ctx.arc(x,y,currSize,0,Math.PI*2,true);
                    ctx.closePath();
                    ctx.fill();

                }
            }

                        }

Ответы [ 2 ]

1 голос
/ 26 июля 2011

Используя fabric.js , это займет примерно 10 строк:

HTML: 

<canvas id="c" width="300" height="300" style="border:1px dotted #ccc"></canvas>

JS: 

var canvas = new fabric.Canvas('c', { selection: false });
canvas.observe('mouse:up', function(e) {
  var pointer = canvas.getPointer(e.memo.e);
  canvas.add(
    new fabric.Circle({ 
      radius: 10, 
      left: pointer.x, 
      top: pointer.y, 
      fill: 'red', 
      selectable: false
    }));
});

Вот демоверсия на jsfiddle .

0 голосов
/ 25 июля 2011

Ваш код отлично работает для меня.Вы уверены, что ваш элемент HTML canvas имеет атрибут id="my_canvas"?

Или вы также можете показать свой HTML-код?

Если вы тестируете в Internet Explorer 9, ваш HTML-документдолжен начинаться с <!DOCTYPE html>, и вы также должны закомментировать свои console.log строки, если у вас не включены инструменты разработчика (F12): 

            ctx.fillStyle=currColor;
            ctx.beginPath();
            //console.log("x" + x);
            //console.log("y" + y);
            //console.log("Current color" + currColor);
            //console.log("Current size" + currSize);
            ctx.arc(x,y,currSize,0,Math.PI*2,true);
            ctx.closePath();
            ctx.fill();
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...