为什么HTML画布中的对象在放大时不显示

Question

有人能解释为什么画布中的绿色弧线没有显示吗。

以下是我迄今为止的进展：https://jsfiddle.net/hxsbLtwj/3/

这是绿色弧线的代码

context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fillStyle = 'green';
context.fill();
context.lineWidth = 5;
context.strokeStyle = '#003300';
context.stroke();

我想要实现的是在缩放窗口中显示绿色弧线，就像上面的"文本"one_answers"图像"部分一样。

我正在使用库"AnythingZoomer2"https://css-tricks.com/examples/AnythingZoomer/index.php

Answer 1

问题是您没有为小区域创建画布，这就是它不起作用的原因，这里有一个工作示例或工作片段：

/* 
Demo for jQuery AnythingZoomer Plugin
https://github.com/CSS-Tricks/AnythingZoomer
*/
$(function() {
var canvas = document.getElementsByClassName('myCanvas')[0];
var context = canvas.getContext('2d');
var centerX = canvas.width / 2;
var centerY = canvas.height / 2;
var radius = 70;
var background = new Image();
background.src = "https://www.yourpurebredpuppy.com/dogbreeds/photos2-G/german-shepherd-05.jpg";
// Make sure the image is loaded first otherwise nothing will draw.
background.onload = function(){
context.drawImage(background,0,0);
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fillStyle = 'green';
context.fill();
context.lineWidth = 5;
context.strokeStyle = '#003300';
context.stroke();
}


var canvas2 = document.getElementsByClassName('myCanvas')[1];
var background2 = new Image();
background2.src = "https://www.yourpurebredpuppy.com/dogbreeds/photos2-G/german-shepherd-05.jpg";
var context2 = canvas2.getContext('2d');
var centerX2 = canvas2.width / 2;
var centerY2 = canvas2.height / 2;
var radius2 = 70;


background2.onload = function(){
context2.drawImage(background2,0,0);
context2.beginPath();
context2.arc(centerX2, centerY2, radius2, 0, 2 * Math.PI, false);
context2.fillStyle = 'green';
context2.fill();
context2.lineWidth = 5;
context2.strokeStyle = '#003300';
context2.stroke();
}
$("#zoom1").anythingZoomer({
// ***************** content areas *****************
// class of small content area; the element with this class
// name must be inside of the wrapper
smallArea: 'small',
// class of large content area; this class must exist inside
// of the wrapper. When the clone option is true, it will add
// this automatically
largeArea: 'large',
// Make a clone of the small content area, use css to modify
// the style; default is false;
// set to true here to clone the small content
clone: true,
// ***************** appearance *****************
// Set to true to add the overlay style while hovering the
// small content, false to disable
overlay: false,
// fade animation speed (in milliseconds)
speed: 100,
// How far outside the wrapped edges the mouse can go;
// previously called "expansionSize"
edge: 30,
// adjust the horizontal position of the large content inside
// the zoom window as desired
offsetX: 0,
// adjust the vertical position of the large content inside
// the zoom window as desired
offsetY: 0,
// ***************** functionality *****************
// event that allows toggling between small and large
// elements; default is double click ('dblclick')
switchEvent: 'dblclick',
// time to delay before revealing the zoom window.
delay: 0,
// ***************** edit mode *****************
// add x,y coordinates into zoom window to make it easier to
// find coordinates
edit: false,
// ***************** callbacks *****************
// AnythingZoomer done initializing
initialized: function(e, zoomer) {},
// zoom window visible
zoom: function(e, zoomer) {},
// zoom window hidden
unzoom: function(e, zoomer) {}
});
$("#zoom2").anythingZoomer();
});

<link rel="stylesheet" type="text/css" href="https://css-tricks.github.io/AnythingZoomer/css/anythingzoomer.css">
<p><strong>Text Demo</strong></p>
<br>
<div id="zoom2">
<div class="small">
<canvas class="myCanvas"></canvas>
</div>
<div class="large">
<canvas class="myCanvas"></canvas>

</div>
</div>
<script
src="https://code.jquery.com/jquery-3.4.1.min.js"
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
crossorigin="anonymous"></script>
<script src="https://css-tricks.github.io/AnythingZoomer/js/jquery.anythingzoomer.js"></script>