Javascript 使用点阵列在画布上绘制多个形状

我有一个带有画布的html页面，它连接到Web服务器并接收需要在画布上绘制的一些点数组

当连接建立时，我得到一个形状作为主模板。这将在整个会议期间保持不变。然后我得到一些其他的形状

我的问题是我不知道如何才能只画一次主形状（模板），然后在画布上轻松地画和清理其他形状。以下是我的申请流程：

1-绘制主模板形状 2-当新形状到达时，在画布上绘制它（不清除已绘制的模板） 3-当新形状到达时，绘制旧形状（不是模板）并绘制新形状

我只需要绘制第一个模板一次，因为我得到了大量的点，并且我对它们进行了耗时的计算。我不想每次新形状出现时都重新绘制此模板

重建是实现这一目标的一种方式吗？它还应该考虑页面大小调整等

我已经准备了下面的最小示例来模拟我所需要的

//主模板形状
设template=[{x:10，y:10}，{x:120，y:10}，{x:110，y:110}，{x:50，y:175}]；
//一些形状
让形状=[
[{x:20，y:20}，{x:110，y:20}，{x:100，y:100}，{x:60，y:145}]，
[{x:30，y:30}，{x:100，y:30}，{x:90，y:90}，{x:70，y:135}]，
[{x:40，y:40}，{x:90，y:40}，{x:80，y:70}，{x:80，y:125}]，
];
设shapeIndex=0；//循环浏览阵列形状的步骤
让canvas={}；//画布
设ctx={}；//画布的上下文
//初始元素
$（文档）.ready（函数（）{
canvas=document.getElementById（“myCanvas”）；
ctx=canvas.getContext（“2d”）；
});
//绘制模板
函数drawTemplate（）{
ctx.save（）；
ctx.beginPath（）；
ctx.strokeStyle=‘黄色’；
ctx.fillStyle='红色'；
用于（模板的让点）{
ctx.lineTo（点x，点y）；
}
ctx.closePath（）；
ctx.fill（）；
ctx.stroke（）；
ctx.restore（）；
}
//从形状数组中绘制一个形状
函数drawShape（）{
ctx.save（）；
ctx.strokeStyle=‘白色’；
ctx.fillStyle='rgba（127127,0.5）'；
ctx.beginPath（）；
让点=getShapeFromArray（）；
用于（点对点）{
ctx.lineTo（点x，点y）；
}
ctx.closePath（）；
ctx.fill（）；
ctx.stroke（）；
ctx.restore（）；
}
//从形状数组中绘制一个形状
函数drawShape（）{
//如何清除已绘制的图形（如果有）？
ctx.save（）；
ctx.strokeStyle=‘白色’；
ctx.fillStyle='rgba（127127,0.5）'；
ctx.beginPath（）；
让点=getShapeFromArray（）；
用于（点对点）{
ctx.lineTo（点x，点y）；
}
ctx.closePath（）；
ctx.fill（）；
ctx.stroke（）；
ctx.restore（）；
}
//帮助器以获取数组中的下一个元素
函数getShapeFromArray（）{
if（shapeIndex==shapes.length）{
形状指数=0；
}
返回形状[shapeIndex++]；
}

哈哈哈！

绘图模板
画图

Hi@DEKKER这里是可行的解决方案

canvas=document.getElementById（“myCanvas”）；
ctx=canvas.getContext（“2d”）；
//主模板形状
设template=[{x:10，y:10}，{x:120，y:10}，{x:110，y:110}，{x:50，y:175}]；
//一些形状
让形状=[]；
//先把模板放进我们的桶里
形状。推送（模板）；
//助手fn。
//带极限的随机整数
设RI=函数（最小值、最大值）{
如果（max==null）{max=min；min=0；}
如果（min>max）{var tmp=min；min=max；max=tmp；}
返回Math.floor（min+（max-min+1）*Math.random（））；
}
//返回包含3个随机点的数组
函数genPoint（）{
返回[{x:RI（1199），y:RI（1199）}，{x:RI（1199），y:RI（1199）}，{x:RI（1199），y:RI（1199）}，{x:RI（1199），y:RI（1199）}]；
}
//绘制模板
函数drawPoly（点，isTemplate=false）{
ctx.save（）；
ctx.beginPath（）；
ctx.strokeStyle=（isTemplate）？“黄色”：“白色”；
ctx.fillStyle=（isTemplate）‘红色’：‘rgba（1270,0.5）’；
对于（让点对点）{
ctx.lineTo（点x，点y）；
}
ctx.closePath（）；
ctx.fill（）；
ctx.stroke（）；
ctx.restore（）；
}
//主要逻辑
函数绘图点（ajaxData=false）{
//如果桶包含更多附加点（多边形）
//画最后两个多边形
如果（shapes.length>2）{
ctx.clearRect（0，0，canvas.width，canvas.height）；//清除画布
drawPoly（shapes[shapes.length-2]，false）；//绘制最后两个
drawPoly（形状[shapes.length-1]，假）；
}否则{
drawPoly（shapes[shapes.length-1]，（shapes.length==1））；
}
//在“shapes”数组或ajaxData或任何形式中随机推送“genPoint”数据
shapes.push（（ajaxData）？ajaxData:genPoint（）；//在堆栈上添加新点
}
//绘图和演示工作系统
设定间隔（提取点，2000年）
不是一个很好的解决方案，但是如果它只是一个图形表示，只需在下面放置一个新画布，并在下面的画布上绘制模板，因此，您可以使用
clearRect
或上面所需的任何工具清除画布，并仅在每次出现错误时重新绘制可见的内容change@Blindman67清除将返回白色（默认背景色）画布。也许我不明白你的意思？是否有一个特殊的清除函数？从清除的（透明的）画布中没有特殊的清除函数，在调用<代码> CTX.CultReCt（0，0，宽度，高度）重画所有可见的内容，如果重画太麻烦，你应该考虑使用一个库来为你做这件事：听起来像是一个很好的候选者，这样你就可以显示，隐藏，删除和添加对象和形状，减少麻烦。。。把你的时间集中在你真正想做的事情上感谢你的努力：）