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

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

以下是我目前的进展：

以下是绿色弧的代码

  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”库

---

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

/*
jQuery AnythingZoomer插件演示
https://github.com/CSS-Tricks/AnythingZoomer
*/
$（函数（）{
var canvas=document.getElementsByClassName（'myCanvas'）[0]；
var context=canvas.getContext（'2d'）；
var centerX=canvas.width/2；
var centerY=canvas.height/2；
var半径=70；
var background=新图像（）；
background.src=”https://www.yourpurebredpuppy.com/dogbreeds/photos2-G/german-shepherd-05.jpg";
//确保先加载图像，否则不会绘制任何内容。
background.onload=函数（）{
背景，0,0；
context.beginPath（）；
弧（centerX，centerY，半径，0，2*Math.PI，false）；
context.fillStyle='green'；
context.fill（）；
context.lineWidth=5；
context.strokeStyle='#003300'；
stroke（）；
}
var canvas2=document.getElementsByClassName（'myCanvas'）[1]；
var background2=新图像（）；
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=画布2.height/2；
var半径2=70；
background2.onload=函数（）{
背景2.drawImage（背景2,0,0）；
context2.beginPath（）；
context2.弧（centerX2，centerY2，radius2，0，2*Math.PI，false）；
context2.fillStyle='绿色'；
context2.fill（）；
context2.lineWidth=5；
context2.strokeStyle='#003300'；
context2.stroke（）；
}
$（“#缩放1”）。任何东西缩放器({
//****************内容区*****************
//小内容区域的类；具有此类的元素
//名称必须位于包装器内部
小面积：'小'，
//大内容区域的类；此类必须存在于内部
//当clone选项为true时，它将添加
//这是自动的
largeArea:'大'，
//复制小内容区域，使用css修改
//样式；默认值为false；
//此处设置为true可克隆小内容
克隆人：是的，
//*******************外观*****************
//设置为true可在悬停鼠标时添加覆盖样式
//小内容，假禁用
覆盖：假，
//淡入淡出动画速度（毫秒）
速度:100,，
//鼠标可以在包裹的边缘外走多远；
//以前称为“扩展大小”
优势：30，
//调整内部大内容的水平位置
//根据需要显示缩放窗口
抵销额：0，
//调整内部大内容的垂直位置
//根据需要显示缩放窗口
副职：0，
//****************功能*****************
//允许在大小之间切换的事件
//元素；默认值为双击（'dblclick'）
switchEvent:'dblclick'，
//显示缩放窗口之前的延迟时间。
延迟：0，
//****************编辑模式*****************
//将x、y坐标添加到缩放窗口中，以便于
//找到坐标
编辑：false，
//****************回调*****************
//任何东西缩放完成初始化
初始化：函数（e，缩放器）{}，
//缩放窗口可见
缩放：函数（e，缩放器）{}，
//隐藏的缩放窗口
取消缩放：函数（e，缩放器）{}
});
$（“#zoom2”）.anythingZoomer（）；
});

文本演示



问题在于您没有为小区域创建画布，这就是为什么它不工作的原因，这里有一个工作或工作片段：


/*
jQuery AnythingZoomer插件演示
https://github.com/CSS-Tricks/AnythingZoomer
*/
$（函数（）{
var canvas=document.getElementsByClassName（'myCanvas'）[0]；
var context=canvas.getContext（'2d'）；
var centerX=canvas.width/2；
var centerY=canvas.height/2；
var半径=70；
var background=新图像（）；
background.src=”https://www.yourpurebredpuppy.com/dogbreeds/photos2-G/german-shepherd-05.jpg";
//确保先加载图像，否则不会绘制任何内容。
background.onload=函数（）{
背景，0,0；
context.beginPath（）；
弧（centerX，centerY，半径，0，2*Math.PI，false）；
context.fillStyle='green'；
context.fill（）；
context.lineWidth=5；
context.strokeStyle='#003300'；
stroke（）；
}
var canvas2=document.getElementsByClassName（'myCanvas'）[1]；
var background2=新图像（）；
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=画布2.height/2；
var半径2=70；
background2.onload=函数（）{
背景2.drawImage（背景2,0,0）；
context2.beginPath（）；
context2.弧（centerX2，centerY2，radius2，0，2*Math.PI，false）；
context2.fillStyle='绿色'；
context2.fill（）；
context2.lineWidth=5；
context2.strokeStyle='#003300'；
context2.stroke（）；
}
$（“#缩放1”）。任何东西缩放器({
//****************内容区*****************
//小内容区域的类；具有此类的元素
//名称必须位于包装器内部
小面积：'小'，
//大内容区域的类；此类必须存在于内部
//第