javascript - 放大 html Canvas

Question

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

1. Canvas 元素，由图像填充其背景。在此图像的顶部，我画了一个箭头和一条可能的路径。背景图像非常大，这意味着我无法从这张大图像中获取那么多信息。这就是第二点的原因。
2. 我想展示 Canvas 元素 1 的剪切效果。例如如下图所示:

目前我得到了 Canvas 元素 1 中红色箭头的坐标，现在我想做一些事情，比如用图像中的偏移量剪切此部分。

我如何用 JavaScript/JQuery 解决这样的问题。总之，我有两个 Canvas 元素。其中之一是显示一张带有红色箭头的大 map ，它代表当前位置(这已经可以使用)，但现在我想显示第二个 Canvas 元素，其中包含红色箭头所在部分的缩放。目前我正在获取坐标，但不知道如何“缩放”到 Canvas 元素。

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

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

2. 这里是一个 JavaScript 代码片段，它在 map 上呈现红色箭头，并为 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 图像，这并不总是像我们想象的那样......
我建议您从头开始绘制所有内容，这是一个起点:

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