HTML5画布：如何在一个画布中创建多个形状，并独立定位/设置它们的样式

我对使用HTML画布还不熟悉，我希望能够创建一个可以使用画布进行转换和交互的按钮。但我正在努力绘制多个组件部件，并对它们进行独立的样式/调整

基本上，我正在寻找一个中心有心脏轮廓的灰色圆圈，几乎填满了灰色圆圈。圆圈将使用

.arc

绘制，心脏轮廓为

svg路径

1） 如何在画布上创建多个可以彼此独立操作的形状？我从创建同一画布的多个上下文开始，对吗？例如

circleContext

和

heartContext

，这样我就可以设置不同的

fill

颜色，并且只针对特定的上下文。这是正确的方法吗

2） 如何在画布上定位这些形状？我已经设置了

canvasCentreX

和

canvasCentreY

，希望使用这些坐标将形状设置在我想要的位置，但我似乎无法使用

.moveTo

或任何其他可用方法正确定位

路径2D

以下是我所拥有的：

//画布设置
const canvas=document.getElementById（'saveButtonCanvas'）；
const ctx=canvas.getContext（'2d'）；
const canvasCentreX=canvas.width/2；
const canvasCentreY=canvas.height/2；
//画灰色背景圈
const circleContext=canvas.getContext（'2d'）；
const backgroundCircleRadius=canvas.width/2；
circleContext.beginPath（）；
arc（canvasCentreX，canvasCentreY，backgroundCircleRadius，0,2*Math.PI）；
circleContext.fillStyle='#eee'；
circleContext.fill（）；
//勾勒心形
const-heartContext=canvas.getContext（'2d'）；
heartContext.lineWidth=2；
const heartOutline=新路径2D("7.0.0 0.0.0 0.0 0.017926269 9 9 9 9 9 9 9 9 9 9 9 4141414141414141414141414141419 9 9.9 9 9 9 9 9 9.9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 12.3067401 17.99921,5.41919604 C17.9962917,2.42234403 15.6261038，-0.00339354795 12.7047547,3.56374623e-06 L12.7047547,3.56374623e-06 Z”）；
心脏轮廓。移动到（canvasCentreX，canvasCentreY）；
heartContext.stroke（心形轮廓）；

#saveButtonCanvas{
高度：80px；
宽度：80px；
利润率：30像素；
光标：指针；
}

---

这是wow，我会这样做：首先我需要svg路径的大小。为了获得大小，您可以在svg元素中绘制svg路径并使用getBBox（）方法。此方法返回一个具有边界框大小和坐标的对象。我使用宽度和高度

您只需要获取一次上下文

要在画布中央移动心脏，我将使用

translate

//画布设置
const canvas=document.getElementById（'saveButtonCanvas'）；
const ctx=canvas.getContext（'2d'）；
const canvasCentreX=canvas.width/2；
const canvasCentreY=canvas.height/2；
//画灰色背景圈
//const circleContext=canvas.getContext（'2d'）；
const backgroundCircleRadius=canvas.width/2；
ctx.beginPath（）；
ctx.arc（canvasCentreX，canvasCentreY，backgroundCircleRadius，0,2*Math.PI）；
ctx.fillStyle='#eee'；
ctx.fill（）；
//勾勒心形
//const-heartContext=canvas.getContext（'2d'）；
ctx.lineWidth=2；
常数hw=18；//心脏的宽度
常数hh=16；//心脏的高度
ctx.save（）；
//在画布中央平移心脏
ctx.translate（-hw/2，-hh/2）；
翻译（canvasCentreX，canvasCentreY）；
const heartOutline=新路径2D（“7.0.0 0.0.0 0.0 0.017926269 9 9 9 9 9 9 9 9 9 9 9 4141414141414141414141414141419 9 9.9 9 9 9 9 9 9.9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 12.3067401 17.99921,5.41919604 C17.9962917,2.42234403 15.6261038，-0.00339354795 12.7047547,3.56374623e-06 L12.7047547,3.56374623e-06 Z”）；
中风（心脏轮廓）；
ctx.restore（）；

#saveButtonCanvas{
高度：80px；
宽度：80px；
利润率：30像素；
光标：指针；
}
画布{border:1px solid}