Javascript 如何使画布图形具有响应性？

我用画布画了这个图。然而，这个图形没有响应性，当我试图通过根据新的尺寸绘制使其响应时，旧的线条与新的线条一起保留在屏幕上。如何调整每条线的大小而不反复绘制它们

---

函数绘图形状（a、b、c、d、e、f、g、h、i、j、k、l）{
var canvas=document.getElementById（'linegraph1'）；
var值=新数组（a、b、c、d、e、f、g、h、i、j、k、l）；
var ctx=canvas.getContext（'2d'）；
对于（i=1；i<13；i++）{
{
ctx.beginPath（）；
ctx.lineWidth=9；
ctx.lineCap='圆形'；
ctx.strokeStyle='#FFFFFF'；
ctx.moveTo（7+i*30,50）；
ctx.lineTo（7+i*30150）；
ctx.stroke（）；
}
{
ctx.beginPath（）；
ctx.lineWidth=9；
ctx.lineCap='圆形'；
ctx.strokeStyle='#EFF2FB'；
ctx.moveTo（7+i*30,50）；
ctx.lineTo（7+i*30150）；
ctx.stroke（）；
}
ctx.lineWidth=9；
ctx.beginPath（）；
ctx.移动到（7+i*30150）；
如果（值[i-1]>100）{
var缓冲=50；
}否则{
var缓冲区=150-值[i-1]；
}
ctx.lineTo（7+i*30，缓冲器）；
如果（值[i-1]>80）{
ctx.strokeStyle='#B60114'；
}否则{
ctx.strokeStyle='#0093CF'；
}
ctx.lineCap='圆形'；
ctx.lineCap='圆形'；
ctx.font=“15px Arial”；
ctx.fillText（值[i-1]，1+i*30180）；
ctx.stroke（）；
}
ctx.beginPath（）；
ctx.font=“15px Arial”；
ctx.fillText（“0”，400，150）；
ctx.fillText（“25”，400，105）；
ctx.fillText（“50”，400，60）；
ctx.fillText（“mb”，400，180）；
}

绘制图形

您可以在画布元素上使用css：

函数绘图形状（a、b、c、d、e、f、g、h、i、j、k、l）{
var canvas=document.getElementById（'linegraph1'）；
var值=新数组（a、b、c、d、e、f、g、h、i、j、k、l）；
var ctx=canvas.getContext（'2d'）；
//在绘图之间擦拭画布
clearRect（0，0，canvas.width，canvas.height）；
对于（i=1；i<13；i++）{
{
ctx.beginPath（）；
ctx.lineWidth=90；
ctx.lineCap='圆形'；
ctx.strokeStyle='#FFFFFF'；
ctx.moveTo（7+i*300500）；
ctx.lineTo（7+i*3001500）；
ctx.stroke（）；
} {
ctx.beginPath（）；
ctx.lineWidth=90；
ctx.lineCap='圆形'；
ctx.strokeStyle='#EFF2FB'；
ctx.moveTo（7+i*300500）；
ctx.lineTo（7+i*3001500）；
ctx.stroke（）；
}
ctx.lineWidth=90；
ctx.beginPath（）；
ctx.moveTo（7+i*3001500）；
如果（值[i-1]>100）{
var缓冲=50；
}否则{
var缓冲区=150-值[i-1]；
}
ctx.lineTo（7+i*300，缓冲器）；
如果（值[i-1]>80）{
ctx.strokeStyle='#B60114'；
}否则{
ctx.strokeStyle='#0093CF'；
}
ctx.lineCap='圆形'；
ctx.lineCap='圆形'；
ctx.font=“150px Arial”；
ctx.fillText（值[i-1]，1+i*3001800）；
ctx.stroke（）；
}
ctx.beginPath（）；
ctx.font=“150px Arial”；
ctx.fillText（“0”、4000、1500）；
ctx.fillText（“25”，4000，1050）；
ctx.fillText（“50”，4000600）；
ctx.fillText（“mb”、4000、1800）；
}

#线条图1{
边框：1px纯灰；
边界半径：10px；
/*安装窗口*/
宽度：100%；
}

绘制图形

您不能。。。。。画布就像图像一样。。。。您必须在创建新画布时销毁旧画布创建一个虚拟的

画布

将原始画布的内容复制到画布上（使用

drawImage（）

），然后您应该按百分比计算比例差，就像将新的宽度和高度除以以前的宽度和高度一样，因此在快速

clearRect（）

之后，您可以

scale（）

您的上下文，然后将虚拟画布的内容复制到您的原始画布，如SVG，以获得更具响应性的内容。