javascript - SVG viewbox 可以在 HTML Canvas 中吗？

Question

我正在尝试制作一个简单的方 block 移动游戏，其中鼠标是一个黑色方 block 。我只是计划使用 html、css、javascript 和 jQuery，但这非常困难。我可以在 html Canvas 标记中使不同的方 block 在屏幕上移动，但我能够使鼠标成为正方形的唯一方法是使用 svg 标记。

<svg id="svg-box" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30" onload="makeDraggable(evt)">
     <rect class="draggable" fill="#000" x="2" y="" width="2" height="2" transform="rotate(90, 5, 5) translate(10, 0)"/>
</svg>

然后我将对象设置为可拖动，拖动正方形时将光标设置为无。这是脚本:

function makeDraggable(evt) {
    var svg = evt.target;

    svg.addEventListener('mousedown', startDrag);
    svg.addEventListener('mousemove', drag);

    svg.addEventListener('touchstart', startDrag);
    svg.addEventListener('touchmove', drag);


    function getMousePosition(evt) {
    var CTM = svg.getScreenCTM();
    if (evt.touches) { evt = evt.touches[0]; }
    return {
        x: (evt.clientX - CTM.e) / CTM.a,
        y: (evt.clientY - CTM.f) / CTM.d
    };
    }

    var selectedElement, offset, transform;

    function startDrag(evt) {
    if (evt.target.classList.contains('draggable')) {
        selectedElement = evt.target;
        offset = getMousePosition(evt);

        // Make sure the first transform on the element is a translate transform
        var transforms = selectedElement.transform.baseVal;

        if (transforms.length === 0 || transforms.getItem(0).type !== SVGTransform.SVG_TRANSFORM_TRANSLATE) {
        // Create an transform that translates by (0, 0)
        var translate = svg.createSVGTransform();
        translate.setTranslate(0, 0);
        selectedElement.transform.baseVal.insertItemBefore(translate, 0);
        }

        // Get initial translation
        transform = transforms.getItem(0);
        offset.x -= transform.matrix.e;
        offset.y -= transform.matrix.f;
    }
    }

    function drag(evt) {
    if (selectedElement) {
        evt.preventDefault();
        var coord = getMousePosition(evt);
        transform.setTranslate(coord.x - offset.x, coord.y - offset.y);
    }
    }

    function endDrag(evt) {
    selectedElement = false;
    }
}

我确实知道有一种更简单的方法可以做到这一点，但这是我的蛮力方法。无论如何，如果有人有更好的方法，那就太好了。否则，有任何想法可以解决这个问题。我尝试设置属性以将 viewBox 放在 Canvas 上，但它不想工作。感谢您的帮助!

Answer 1

您无需 svg 即可在 Canvas 上绘制正方形。这是一篇关于如何跟随光标绘制对象的好文章:https://www.kirupa.com/canvas/follow_mouse_cursor.htm

这是一个正方形的例子:

var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var canvasPos = getPosition(canvas);
var mouseX = 0;
var mouseY = 0;

canvas.addEventListener("mousemove", setMousePosition, false);
 
 function setMousePosition(e) {
  mouseX = e.clientX - canvasPos.x;
  mouseY = e.clientY - canvasPos.y;
}
 

function update() {
  context.clearRect(0, 0, canvas.width, canvas.height);
 
  context.beginPath();
  context.rect(mouseX-25, mouseY-25, 50, 50);
  context.fillStyle = "#000";
  context.fill();
 
  requestAnimationFrame(update);
}       
update();  

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

#myCanvas {
  cursor:none;
}

<canvas id="myCanvas" width="550px" height="350px"></canvas>