холст с мышью, которая двигает мяч - PullRequest
Новая
       0

холст с мышью, которая двигает мяч

0 голосов
/ 01 мая 2018

У меня есть изображение мыши и сыр с изображением линии между ними. Работает отлично. Ничего не делает, кроме как хорошо выглядит.

Я добавил шар, следующий за мышью пользователя, и он очистил все мои изображения. Я пытался добавить слои (я новичок).

Я хочу, чтобы пользователь мыши мог просто подвести шарик поверх изображения мыши к сыру. После того, как я получу эту работу, сыр превратится в отдельный образ.

Пользователь мыши может вести мяч куда угодно. Он не обязательно должен находиться между двумя изображениями. 

<!DOCTYPE html>


<title>Mouse Event</title>

<style>

    canvas {
        border: #333 10px solid;
    }

</style>


<div style = "position: relative;">
    <canvas id = "layer1" width="600px" height="600px"
     style="position: absolute; left: 0; top: 0; z-index: 0;></canvas>
    <canvas id = "layer2" width="600px" height="600px"
     style="position: absolute; left: 0; top: 0; z-index: 1;></canvas>


<script>

    var canvas1 = document.querySelector("#layer1");
    var context = canvas1.getContext("2d");

    //Get the mouse position
    //First, listen for the mouse event & call setMousePosition
    //This function assigns the current horizontal and vertical mouse
    //position to the mouseX,Y properties, it relies on the clientX
    //and Y properties that the MouseEvent-based event arument object provides
    var canvasPos = getPosition(canvas);

    var mouseX = 500;
    var mouseY = 500;

    canvas1.addEventListener("mousemove", setMousePosition, false);

    function setMousePosition(e) {
      mouseX = e.clientX - canvasPos.x;//now stores the position returned by the getPosition function
      mouseY = e.clientY - canvasPos.y;
    }       

    function update() {
      context.clearRect(0, 0, canvas.width, canvas.height);//clears earlier positions
      context.beginPath();
      context.arc(mouseX, mouseY, 50, 0, 2 * Math.PI, true);
      context.fillStyle = "LightSeaGreen";
        context.lineWidth = 5;
        context.strokeStyle = "yellow";
        context.fill();
        context.stroke();

      requestAnimationFrame(update);
    }
    //Get the Exact Mouse Position
    function getPosition(el) {
      var xPosition = 0;
      var yPosition = 0;

      while (el) {
        xPosition += (el.offsetLeft - el.scrollLeft + el.clientLeft);
        yPosition += (el.offsetTop - el.scrollTop + el.clientTop);
        el = el.offsetParent;
      }
      return {
        x: xPosition,
        y: yPosition
      };
    }       

    update();

    var canvas2 = document.querySelector("#layer2");
    var context = canvas2.getContext("2d");

    //draw connecting line
    context.moveTo(30,30);
    context.bezierCurveTo(-50,600, 500, 0, 300,500);
    context.lineWidth = 15;
    context.strokeStyle = "teal";
    context.stroke();

    context.fillStyle = "#ff6600";
    context.font = "bold 35px 'Book Antiqua'";
    context.fillText("Help Me", 300,100);
    context.fillText("find the cheese,", 300, 135);
    context.fillText("Please!", 300, 170);


    //load cheeseImage
    var cheeseImage = new Image();
    cheeseImage.src = "images/transparentCheese.png";
    cheeseImage.addEventListener("load", loadImage, false);

    //load mouse image
    var mouseImage = new Image();
    mouseImage.src = "images/mouse.png";
    mouseImage.addEventListener("load", loadImage, false);


    function loadImage(e) {
        context.drawImage(cheeseImage,10,10);
        context.drawImage(mouseImage,210,400);

    }


</script>

</div>

[мышь * +1022 *] [1] сыр

1 Ответ

0 голосов
/ 02 мая 2018

Изображения пропали, потому что функция обновления очищает холст каждый кадр анимации (context.clearRect), но вы хотите, чтобы холст очистился, поэтому не удаляйте это.

Вам нужно поместить весь код для рисования того, что вы хотите, на холст внутри функции обновления, или функции, вызываемые кодом обновления.

Также лучше дождаться загрузки обоих изображений перед первым вызовом функции update ().

Я изменил ваш код и добавил несколько комментариев, надеюсь, это имеет смысл ... 

function update() {
  context.clearRect(0, 0, canvas.width, canvas.height);//clears earlier positions
  context.beginPath();
  context.arc(mouseX, mouseY, 50, 0, 2 * Math.PI, true);
  context.fillStyle = "LightSeaGreen";
    context.lineWidth = 5;
    context.strokeStyle = "yellow";
    context.fill();
    context.stroke();

    // Call functions to draw text and images on the canvas.
    drawText();
    drawCheese();
    drawMouse();

  requestAnimationFrame(update);
}
//Get the Exact Mouse Position
function getPosition(el) {
  var xPosition = 0;
  var yPosition = 0;

  while (el) {
    xPosition += (el.offsetLeft - el.scrollLeft + el.clientLeft);
    yPosition += (el.offsetTop - el.scrollTop + el.clientTop);
    el = el.offsetParent;
  }
  return {
    x: xPosition,
    y: yPosition
  };
}       

var canvas2 = document.querySelector("#layer2");
var context = canvas2.getContext("2d");


function drawText() {
    //draw connecting line
  context.moveTo(30,30);
  context.bezierCurveTo(-50,600, 500, 0, 300,500);
  context.lineWidth = 15;
  context.strokeStyle = "teal";
  context.stroke();

  context.fillStyle = "#ff6600";
  context.font = "bold 35px 'Book Antiqua'";
  context.fillText("Help Me", 300,100);
  context.fillText("find the cheese,", 300, 135);
  context.fillText("Please!", 300, 170);
}

// Draw cheese image on canvas
function drawCheese() {
    context.drawImage(cheeseImage,10,10);
}

// Draw mouse image on canvas.
function drawMouse() {
    context.drawImage(mouseImage,210,400);
}


//load cheeseImage
var cheeseImage = new Image();
cheeseImage.src = "images/transparentCheese.png";
cheeseImage.addEventListener("load", loadImage, false);

//load mouse image
var mouseImage = new Image();
mouseImage.src = "images/mouse.png";
mouseImage.addEventListener("load", loadImage, false);


var imagesLoaded = 0;

// Called when image is loaded.
function loadImage(e) {
        // Increment the number of images loaded
        imagesLoaded += 1;

        // If both images have loaded call the update function for the first time.
        if (imagesLoaded == 2) {
            update();
        }
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...