HTML画布&；JavaScript-选择菜单-设置初始和持续当前选择

在下面的HTML画布中，我有一个选择菜单，根据所选内容触发旁边图像的绘制（下面示例中的数字1-5）。JavaScript使用伪对象方法来存储/操作画布上绘制的图像。除了附加到画布上的

EventListener

，还有一个

EventListener

附加到整个窗口，当窗口大小更改时，该窗口会以严格的纵横比调整画布的大小

我目前遇到的问题是，当触发EventListener时（当窗口大小更改时），选择被清除。要在下面的示例中复制这一点，您必须以全屏模式运行代码段并更改浏览器窗口的大小。相反，我希望在窗口（以及相应的画布）大小更改后保持当前选择。我已经尝试将当前选择指定给一个变量，但我只能让它在onHover动画不起作用的地方留下一个静态选择

另外，与此相关，我正在尝试设置在第一个画布绘制上选择的初始选择，直到选择了其他选项之一。在这种情况下，当脚本最初加载时，我希望自动选择/显示数字1及其对应的图像，直到进行新的选择。同样，将其指定为

初始选择

变量或调用

makeCurvedRect

会单独留下一个静态选择，我的意思是

curvedRect

（图像）不会设置动画

onHover

我非常不确定如何实现这两个结果，因此任何帮助都将不胜感激。很抱歉，代码太多了，但我无法将其浓缩成这样

var c=document.getElementById（'game'），
rect=c.getBoundingClientRect（），
ctx=c.getContext（'2d'）；
c、 宽度=window.innerWidth；
c、 高度=（2/3）*c.宽度；
numberImages=['https://i.stack.imgur.com/TZIUz.png','https://i.stack.imgur.com/6beTF.png','https://i.stack.imgur.com/wZk2H.png','https://i.stack.imgur.com/1K743.png','https://i.stack.imgur.com/jMMmQ.png'];
var curvedRect=函数（数字，x，y，w，h）{
this.text=number.toString（）；
this.img=新图像（）；
this.img.src=numberImages[number-1]；
这个.x=x；
这个。y=y；
这个.w=w；
这个，h=h；
this.hover=false；
this.clicked=false；
可见=假；
}
选择var；
curvedRect.prototype.makeCurvedRect=函数（）{
varδ=0，θ=0；
如果（这个悬停）{
δ=（c.高度*（3/500））；
θ=-0.01；
阴影颜色='#000000'；
阴影模糊=20；
shadowOffsetX=5；
shadowOffsetY=5；
}否则{
δ=0；
θ=0；
阴影颜色='#9F3A9B'；
阴影模糊=0；
shadowOffsetX=0；
shadowOffsetY=0；
}
var x=这个x-delta；
var y=这个y-delta；
var w=这个.w+（2*delta）；
var h=这个.h+（2*delta）；
变截面圆角=（c.高度*（10/500））
旋转（θ）；
ctx.beginPath（）；
ctx.lineWidth='12'；
ctx.strokeStyle='white'；
ctx.移动至（x+转弯器，y）；
ctx.lineTo（x+w-转弯圆机，y）；
ctx.四次曲线（x+w，y，x+w，y+圆角）；
ctx.lineTo（x+w，y+h-转弯器）；
ctx.四次曲线（x+w，y+h，x+w-转弯器，y+h）；
ctx.lineTo（x+转弯轮，y+h）；
ctx.四次曲线（x，y+h，x，y+h-转弯器）；
ctx.lineTo（x，y+拐角圆角）；
ctx.四次曲线（x，y，x+转弯器，y）；
ctx.shadowColor=shadowColor；
ctx.shadowBlur=阴影模糊；
ctx.shadowOffsetX=shadowOffsetX；
ctx.shadowOffsetY=shadowOffsetY；
ctx.stroke（）；
ctx.shadowBlur=0；
ctx.shadowOffsetX=0；
ctx.shadowOffsetY=0；
ctx.drawImage（此图为img，x+（c.width*（2.5/750）），y+（c.height*（2.5/500）），w-cornerRounder/2，h-cornerRounder/2）；
旋转（-θ）；
}
curvedRect.prototype.hitTest=函数（x，y）{
返回（x>=this.x）&&（x=this.y）&&（y=（c.width*（400/750））&&（x=this.y）&&
（y=c.宽度*（400/750）和&（y>c.高度*（450/500()()())）；
}
var Paint=函数（元素）{
this.element=元素；
this.shapes=[]；
}
Paint.prototype.addShape=函数（形状）{
这个。形状。推（形状）；
}
Paint.prototype.render=函数（）{
clearRect（0，0，this.element.width，this.element.height）；
对于（var i=0；i问题在于，调整大小处理程序调用
paintCanvas
，并且在
paintCanvas
方法中，您正在将全局
paint
变量分配给新的
paint
实例。这将完全清除您的状态，并强制重新绘制画布以匹配初始状态所有页面加载。相反，您需要维护您的状态，清除画布并使用其现有状态重新渲染，但只使用新的大小

function paintCanvas() {
    c.width  = window.innerWidth;
    c.height = (2/3)*c.width;
    ctx=c.getContext('2d');
    rect = c.getBoundingClientRect();

    //paint = new Paint(c);

注释掉
//paint=new paint（c）；
会使您的状态保持不变。由于您不再破坏您的状态，您仍然需要清除并重新绘制一些残余


var c=document.getElementById（'game'），
rect=c.getBoundingClientRect（），
ctx=c.getContext（'2d'）；
c、 宽度=window.innerWidth；
c、 高度=（2/3）*c.宽度；
numberImages=['https://i.stack.imgur.com/TZIUz.png','https://i.stack.imgur.com/6beTF.png','https://i.stack.imgur.com/wZk2H.png','https://i.stack.imgur.com/1K743.png','https://i.stack.imgur.com/jMMmQ.png'];
var curvedRect=函数（数字，x，y，w，h）{
this.text=number.toString（）；
this.img=新图像（）；
this.img.src=numberImages[number-1]；
这个.x=x；
这个。y=y；
这个.w=w；
这个，h=h；
this.hover=false；
this.clicked=false；
可见=假；
}
选择var；
curvedRect.prototype.makeCurvedRect=函数（）{
varδ=0，θ=0；
如果（这个悬停）{
δ=（c.高度*（3/500））；
θ=-0.01；
阴影颜色='#000000'；
阴影模糊=20；
shadowOffsetX=5；
shadowOffsetY=5；
}否则{
δ=0；
θ=0；
阴影颜色='#9F3A9B'；
鲱鱼