带有移动球的鼠标的画布答案

【问题标题】：canvas with mouse that moves ball带有移动球的鼠标的画布
【发布时间】：2018-05-02 07:42:46
【问题描述】：

我有一个鼠标图像和一个奶酪图像，中间有线条。工作正常。除了看起来不错，什么都不做。

我添加了一个跟随用户鼠标的球，它清除了我所有的图像。我尝试添加图层（我是一个新手）。

我希望鼠标用户能够仅将鼠标图像顶部的球引导至奶酪。在我开始工作后，我会让奶酪变成一个单独的图像。

鼠标用户可以将球带到任何地方。它不必只是在两个图像之间的线上。

<!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>

[鼠标][1]cheese

【问题讨论】：

标签： javascript html animation canvas

【解决方案1】：

图像消失了，因为更新函数会清除动画的每一帧 (context.clearRect) 的画布，但您希望画布清除所以不要删除它。

你需要把所有的代码在画布上绘制你想要的东西放在更新函数中，或者更新代码调用的函数中。

最好等到两个图像都加载完毕后再调用 update() 函数。

我已经修改了你的代码并添加了一些 cmets，希望它有意义...

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();
        }
}

【讨论】：