Рисование изображений на холсте HTML5

Я хотел рисовать изображения на холсте, но изображение появится только в том месте, где я нажму на холст. Я также изучил этот метод element.getBoundingClientRect, который позволит мне получить смещения холста. Я хотел объединить их, поэтому при нажатии на любую часть холста изображение появится в том же месте, и смещения X и Y также будут отображаться.

В настоящее время мое изображение будет отображаться при загрузке, как мне его изменить, когда я щелкаю по холсту, изображение будет отображаться в той же позиции. Во-вторых, в то же время будут отображаться смещения изображения по осям X и Y.


javascript html5-canvas
person TypeB    schedule 10.07.2014    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Измените свой JS-код следующим образом:

var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");

$results=$("#results");
$dotposition=$("#dotposition");
var position = {x: 0, y: 0};

function handleMouseMove(e) {
    e.preventDefault();
    e.stopPropagation();

    // You could calc the offsets once if you know
    // the user will not scroll the canvas
    var BB=canvas.getBoundingClientRect();
    var offsetX=BB.left;
    var offsetY=BB.top;

    mouseX=parseInt(e.clientX-offsetX);
    mouseY=parseInt(e.clientY-offsetY);
    $results.text("Mouse position: "+mouseX+" / "+mouseY);
    position.x = mouseX;
    position.y = mouseY;
}

function handleMouseClick(e) {
    //Clearing the canvas before redraw, remove this line if you want to keep prev images
    ctx.clearRect ( 0 , 0 , canvas.width , canvas.height );

    ctx.drawImage(img,position.x - img.width / 2,position.y - img.height / 2);
    $dotposition.text("Dot position: "+position.x+" / "+position.y);
}

var img = new Image();
img.onload = function(){
    canvas.onmousemove = handleMouseMove;
    canvas.onclick = handleMouseClick;
};
img.src="https://dl.dropboxusercontent.com/s/7vlxwy1156wnhcw/redFood.png";

http://jsfiddle.net/ZH4KW/1/

person hovitya    schedule 10.07.2014