有没有办法结合这两个代码？ HTML Canvas JS

Question

我已经制作了一个 Canvas HTML 页面。我还制作了一个可以在页面上拖动的圆圈。我想在 Canvas 页面的右下角放置一个可拖动的圆圈。我尝试将拖动圆圈代码与此 html Canvas 代码组合，但它对我不起作用。这是我目前所拥有的：

// canvas html

的代码

<!DOCTYPE html>

<html>

<head>

<title>Help me find...</title>

<style> canvas { border: #333 0px solid; } </style>

</head>

<body> <canvas id="myCanvas" width="900" height="400"></canvas>

<script> var canvas = document.querySelector("#myCanvas");

var context = canvas.getContext("2d");

// orange image

var myImage = new Image();

myImage.src = "https://www.kirupa.com/canvas/images/orange.svg";

myImage.addEventListener("load", loadImage, false);

function loadImage(e) { context.drawImage(myImage, 0, 300, 70, 70);

// text context.font = "bold italic 26px Helvetica, Arial, sans-serif";

context.fillStyle = "red";

context.fillText("Help me find......", 53, 30); }

//Triangle

context.beginPath();

context.moveTo(20,43);

context.lineTo(50, 43);

context.lineTo(10,0);

context.closePath();

context.lineWidth = 3;

context.strokeStyle = "#DCB001";

context.stroke();

context.fillStyle = "yellow";

context.fill();

//line

context.beginPath();

context.moveTo(20, 60);

context.bezierCurveTo(0, 80, 100, 250, 50, 300);

context.stroke();

context.closePath();

</script>

</body>

</html>

//拖动圆的代码

<!DOCTYPE html>
<html>

<head>
<meta name="viewport"
content="width=device-width,
initial-scale=1.0,
user-scalable=no" />
<title>Drag/Drop/Bounce</title>
<style>
#container {
width: 50%;
height: 400px;
background-color: #333;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
border-radius: 7px;
touch-action: none;
}
#item {
width: 100px;
height: 100px;
   background-color: rgb(245, 230, 99);
border: 10px solid rgba(136, 136, 136, .5);
border-radius: 50%;
touch-action: none;
user-select: none;
}
#item:active {
background-color: rgba(255, 255, 255, 1.00);
}
#item:hover {
cursor: pointer;
border-width: 20px;
}
</style>
</head>

<body>

<div id="outerContainer">
<div id="container">
<div id="item">

</div>
</div>
</div>

<script>
var dragItem = document.querySelector("#item");
var container = document.querySelector("#container");

var active = false;
var currentX;
var currentY;
var initialX;
var initialY;
var xOffset = 0;
var yOffset = 0;

container.addEventListener("touchstart", dragStart, false);
container.addEventListener("touchend", dragEnd, false);
container.addEventListener("touchmove", drag, false);

container.addEventListener("mousedown", dragStart, false);
container.addEventListener("mouseup", dragEnd, false);
container.addEventListener("mousemove", drag, false);

function dragStart(e) {
if (e.type === "touchstart") {
initialX = e.touches[0].clientX - xOffset;
initialY = e.touches[0].clientY - yOffset;
} else {
initialX = e.clientX - xOffset;
initialY = e.clientY - yOffset;
}

if (e.target === dragItem) {
active = true;
}
}

function dragEnd(e) {
initialX = currentX;
initialY = currentY;

active = false;
}

function drag(e) {
if (active) {
  
e.preventDefault();
  
if (e.type === "touchmove") {
currentX = e.touches[0].clientX - initialX;
currentY = e.touches[0].clientY - initialY;
} else {
currentX = e.clientX - initialX;
currentY = e.clientY - initialY;
}

xOffset = currentX;
yOffset = currentY;

setTranslate(currentX, currentY, dragItem);
}
}

function setTranslate(xPos, yPos, el) {
el.style.transform = "translate3d(" + xPos + "px, " + yPos + "px, 0)";
}
  </script>
</body>

</html>

Answer 1

好吧，如果您想在 HTML 中组合这些脚本，您可以试试这个：

<html>
  <head>
    <title>Help me find...</title>

    <style>
      canvas {
        border: #333 0px solid;
      }
    </style>

    <style>
      #container {
        width: 50%;
        height: 400px;
        background-color: #333;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        border-radius: 7px;
        touch-action: none;
      }

      #item {
        width: 100px;
        height: 100px;
        background-color: rgb(245, 230, 99);
        border: 10px solid rgba(136, 136, 136, 0.5);
        border-radius: 50%;
        touch-action: none;
        user-select: none;
      }

      #item:active {
        background-color: rgba(255, 255, 255, 1);
      }

      #item:hover {
        cursor: pointer;
        border-width: 20px;
      }
    </style>
  </head>

  <body>
    <canvas id="myCanvas" width="900" height="400"> </canvas>
    <div id="item"></div>
  </body>

  <script>
    var canvas = document.querySelector("#myCanvas");
    var context = canvas.getContext("2d");

    // orange image
    var myImage = new Image();
    myImage.src = "https://www.kirupa.com/canvas/images/orange.svg";
    myImage.addEventListener("load", loadImage, false);

    function loadImage(e) {
      context.drawImage(myImage, 0, 300, 70, 70);
      // text context.font = "bold italic 26px Helvetica, Arial, sans-serif";
      context.fillStyle = "red";
      context.fillText("Help me find......", 53, 30);
    }

    //Triangle
    context.beginPath();
    context.moveTo(20, 43);
    context.lineTo(50, 43);
    context.lineTo(10, 0);
    context.closePath();
    context.lineWidth = 3;
    context.strokeStyle = "#DCB001";
    context.stroke();
    context.fillStyle = "yellow";
    context.fill();

    //line
    context.beginPath();
    context.moveTo(20, 60);
    context.bezierCurveTo(0, 80, 100, 250, 50, 300);
    context.stroke();
    context.closePath();

    //------ Drag circle

    var dragItem = document.querySelector("#item");

    var active = false;
    var currentX;
    var currentY;
    var initialX;
    var initialY;
    var xOffset = 0;
    var yOffset = 0;

    dragItem.addEventListener("touchstart", dragStart, false);
    dragItem.addEventListener("touchend", dragEnd, false);
    dragItem.addEventListener("touchmove", drag, false);

    dragItem.addEventListener("mousedown", dragStart, false);
    dragItem.addEventListener("mouseup", dragEnd, false);
    dragItem.addEventListener("mousemove", drag, false);

    function dragStart(e) {
      if (e.type === "touchstart") {
        initialX = e.touches[0].clientX - xOffset;
        initialY = e.touches[0].clientY - yOffset;
      } else {
        initialX = e.clientX - xOffset;
        initialY = e.clientY - yOffset;
      }

      if (e.target === dragItem) {
        active = true;
      }
    }

    function dragEnd(e) {
      initialX = currentX;
      initialY = currentY;

      active = false;
    }

    function drag(e) {
      if (active) {
        e.preventDefault();

        if (e.type === "touchmove") {
          currentX = e.touches[0].clientX - initialX;
          currentY = e.touches[0].clientY - initialY;
        } else {
          currentX = e.clientX - initialX;
          currentY = e.clientY - initialY;
        }

        xOffset = currentX;
        yOffset = currentY;

        setTranslate(currentX, currentY, dragItem);
      }
    }

    function setTranslate(xPos, yPos, el) {
      el.style.transform = "translate3d(" + xPos + "px, " + yPos + "px, 0)";
    }
  </script>
</html>

从你刚才所说的来看，我认为这就是你想要做的，除非你的意思是让橙色可以拖动。有点像拖圈脚本。

Answer 2

我不确定你到底想要什么，但这是我想弄清楚的尝试。首先，我不得不摆脱容器，因为它们看起来毫无意义，而内部容器有 overflow: hidden.

HTML

<canvas id="myCanvas" width="900" height="400"></canvas>
<div id="item"></div>

CSS

#myCanvas { 
  border: solid 2px black;
}

#item {
  position: absolute;
  top: 325px;
  left: 25px;
  width: 25px;
  height: 25px;
  background-color: rgb(245, 230, 99);
  border: 10px solid rgba(136, 136, 136, .5);
  border-radius: 50%;
  touch-action: none;
  user-select: none;
}
#item:active {
  background-color: rgba(255, 255, 255, 1.00);
}
#item:hover {
cursor: pointer;
border-width: 20px;

JS

var canvas = document.querySelector("#myCanvas");
var context = canvas.getContext("2d");

var dragItem = document.querySelector("#item");
var dragItemCoord = dragItem.getBoundingClientRect()
console.log(dragItemCoord)
var active = false;
var currentX;
var currentY;
var initialX;
var initialY;
var xOffset = 0;
var yOffset = 0;
  
window.addEventListener("touchstart", dragStart, false);
window.addEventListener("touchend", dragEnd, false);
window.addEventListener("touchmove", drag, false);

window.addEventListener("mousedown", dragStart, false);
window.addEventListener("mouseup", dragEnd, false);
window.addEventListener("mousemove", drag, false);

// orange image

var myImage = new Image();
myImage.src = "https://www.kirupa.com/canvas/images/orange.svg";

myImage.addEventListener("load", loadImage, false);

function loadImage(e) { 
  context.drawImage(myImage, 0, 300, 70, 70);
  // text context.font = "bold italic 26px Helvetica, Arial, sans-serif";
  context.fillStyle = "red";
  context.fillText("Help me find......", 53, 30);
  //Triangle
  context.beginPath();
  context.moveTo(20,43);
  context.lineTo(50, 43);
  context.lineTo(10,0);
  context.closePath();
  context.lineWidth = 3;
  context.strokeStyle = "#DCB001";
  context.stroke();
  context.fillStyle = "yellow";
  context.fill();
  //line
  context.beginPath();
  context.moveTo(20, 60);
  context.bezierCurveTo(0, 80, 100, 250, 50, 300);
  context.stroke();
  context.closePath();
}
  
function dragStart(e) {
  if (e.type === "touchstart") {
    initialX = e.touches[0].clientX - xOffset;
    initialY = e.touches[0].clientY - yOffset;
  } else {
    initialX = e.clientX - xOffset;
    initialY = e.clientY - yOffset;
  }
  if (e.target === dragItem) {
     active = true;
  }
}
  
function dragEnd(e) {
  initialX = currentX;
  initialY = currentY;

  active = false;
}
  
function drag(e) {
  if (active) {
    e.preventDefault();
  
  if (e.type === "touchmove") {
    currentX = e.touches[0].clientX - initialX;
    currentY = e.touches[0].clientY - initialY;
  } else {
    currentX = e.clientX - initialX;
    currentY = e.clientY - initialY;
  }

  xOffset = currentX;
  yOffset = currentY;

  setTranslate(currentX, currentY, dragItem);
  }
}

function setTranslate(xPos, yPos, el) {
el.style.transform = "translate3d(" + xPos + "px, " + yPos + "px, 0)";
}

有没有办法结合这两个代码？ HTML Canvas JS

Is there a way to combine these two codes? HTML Canvas JS

html

javascript

canvas

html5-canvas