放大到 html 画布

Question

我想在另一个画布元素中显示一个画布元素的剪切。为了解释，我有以下结构：

1. 由图像填充其背景的画布元素。在这张图片的顶部，我画了一个箭头和一条可能的路径。背景图像真的很大，这意味着我无法从这个大图像中获得那么多信息。这就是第二点的原因。
2. 我想展示画布元素 1 的切割。例如，如下图所示：

目前我得到了画布元素 1 中红色箭头的坐标，现在我想做一些类似图像中偏移的切割。

我怎样才能用 JavaScript / JQuery 解决这样的问题。总之，我有两个画布元素。其中一个是显示带有代表当前位置的红色箭头的大地图（这已经有效），但现在我想显示第二个画布元素，其中红色箭头所在部分的缩放。目前我正在获取坐标，但不知道如何“放大”到画布元素中。

就像一些当前的答案所说，我提供了一些代码：

1. 我的 HTML 代码，有 mainCanvasMap，它有一个背景图像，还有 zoomCanvas，它应该显示 mainCanvasMap 的一部分！

2. 这是一个 JavaScript sn-p，它在地图上呈现红色箭头，并应为 zoomCanvas 元素提供缩放功能（红色箭头所在的位置）。

var canvas = {}
canvas.canvas = null;
canvas.ctx = null;
canvas.scale = 0;


var zoomCanvas = {}
zoomCanvas.canvas = null;
zoomCanvas.ctx = null;
zoomCanvas.scale = 0;

    $(document).ready(function () {


        canvas.canvas = document.getElementById('mainCanvasMap');
        canvas.ctx = canvas.canvas.getContext('2d');


        zoomCanvas.canvas = document.getElementById('zoomCanvas');
        zoomCanvas.ctx = zoomCanvas.canvas.getContext('2d');
        
        setInterval(requestTheArrowPosition, 1000);
     });
     
     function requestTheArrowPosition() {
            renderArrowOnMainCanvasElement();
            renderZoomCanvas();
    }

    function renderArrowOnMainCanvasElement(){
          //ADD ARROW TO MAP AND RENDER THEM
    }

    function renderZoomCanvas() {

        //TRY TO ADD THE ZOOM FUNCTION, I WOULD LIKE TO COPY A SECTION OF THE MAINCANVASMAP
        zoomCanvas.ctx.fillRect(0, 0, zoomCanvas.canvas.width, zoomCanvas.canvas.height);
        zoomCanvas.ctx.drawImage(canvas.canvas, 50, 100, 200, 100, 0, 0, 400, 200);
        zoomCanvas.canvas.style.top = 100 + 10 + "px"
        zoomCanvas.canvas.style.left = 100 + 10 + "px"
        zoomCanvas.canvas.style.display = "block";

    }

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>

    <!--MY MAIN CANVAS ELEMENT, WHICH HAS A BACKGROUND IMAGE AND WHERE THE ARROW IS RENDEREED-->
    <canvas id="mainCanvasMap" style="width:100%; height:100%; background: url('https://image.jimcdn.com/app/cms/image/transf/dimension=624x10000:format=jpg/path/s7d1eecaa5cee1012/image/i4484f962de0bf3c2/version/1543751018/image.jpg') 0% 0% / 100% 100%;"></canvas>


    <!-- MY ZOOM CANVAS ELEMENT, SHOULD SHOW A CUTTING OF THE MAINCANVASMAP -->
    <canvas id="zoomCanvas" style="height:100%;width:100%"></canvas>

代码只是一个伪代码，但它显示了我喜欢做什么。

Answer 1

您的代码使用 css 作为画布图像，看起来并不总是像我们想象的那样...
我会建议你从头开始绘制所有内容，这是一个起点：

canvas = document.getElementById('mainCanvasMap');
ctx = canvas.getContext('2d');

zoomCanvas = document.getElementById('zoomCanvas');
zoomCtx = zoomCanvas.getContext('2d');
var pos = {x:0, y:40}

image = document.getElementById('source');
image.onload = draw;

function draw() {
  ctx.drawImage(image,0,0);
  setInterval(drawZoom, 80);  
}

function drawZoom() {
  // simple animation on the x axis
  x = Math.sin(pos.x++/10 % (Math.PI*2)) * 20 + 80 
  zoomCtx.drawImage(image, x, pos.y, 200, 100, 0, 0, 400, 200);
}

<canvas id="mainCanvasMap"></canvas>
<canvas id="zoomCanvas"></canvas>

<img id="source" src="https://image.jimcdn.com/app/cms/image/transf/dimension=624x10000:format=jpg/path/s7d1eecaa5cee1012/image/i4484f962de0bf3c2/version/1543751018/image.jpg" style="display:none">