javascript - 为什么 HTML Canvas 中的对象在放大时不显示

Question

有人可以解释一下为什么 Canvas 内的绿色圆弧没有显示出来。

这是我迄今为止的进展: 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

问题是您没有为小区域创建 Canvas ，这就是它不起作用的原因，这是一个有效的 example或这里的工作片段:

/* 
 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>