為什么 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();

我想要實現的是在縮放窗口中顯示綠色弧線，就像上面“文本”和“圖像”部分中發生的一樣。

我正在使用庫'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>