Javascript 使用画布将图像添加到控制盘

我是画布新手，我尝试创建一个轮子，下面是我的代码：

drawWheel = () =>{
        const length = 4;
        const sliceDeg = 360/length;
        var deg = 270;

        var canvas = this.refs.canvas;
        if(canvas.getContext){
            const ctx = canvas.getContext('2d');
            for(let i = 0;i<length;i++){
                ctx.beginPath();
                ctx.moveTo(center, center);
                ctx.arc(center,center,radius, this.deg2rad(deg) ,this.deg2rad(deg + sliceDeg));
                ctx.lineTo(center,center);
                ctx.stroke();

                ctx.save();
                ctx.translate(center, center);
                ctx.rotate(this.deg2rad(deg+sliceDeg/2));
                ctx.textAlign = "right";
                ctx.fillStyle = "red";
                ctx.font = 'bold 5vw sans-serif';
                ctx.fillText(i+1, radius/1.5,radius/11);
                ctx.restore();
                deg += sliceDeg;  
            }
        }
    }

drawWheel=（）=>{
常数长度=4；
常数切片度=360/长度；
var deg=270；
var canvas=this.refs.canvas；
if（canvas.getContext）{
const ctx=canvas.getContext（'2d'）；
对于（让i=0；i来看下面的示例：


var size=400；//我使用一个简单的大小，因为我没有任何图像。您的代码可能会更智能一些。
var myImages=[]；//图像列表
/*生成图像开始*/
//我在这里使用canvas生成了一些图像，但您可能应该使用elements和img.naturalWidth/img.naturalHeight
[“红”、“蓝”、“绿”、“黄”]。forEach（（颜色）=>{
var canvas=document.createElement（“canvas”）；
canvas.width=canvas.height=size/2；
var ctx=canvas.getContext（“2d”）；
ctx.fillStyle=颜色；
ctx.fillRect（0,0，size/2，size/2）；
推送（画布）；
});
/*生成图像停止*/
//绘画的主画布
var canvas=document.body.appendChild（document.createElement（“canvas”）；
canvas.width=canvas.height=size；
var ctx=canvas.getContext（“2d”）；
//绘制基础形状。
//颜色不重要，因为我们以后会在上面画画
ctx.arc（大小/2，大小/2，大小/2，0，数学PI*2）；
ctx.fill（）；
//将画布设置为在绘制时重用现有像素的透明度。
ctx.globalCompositeOperation=“source”；
//循环浏览图像并在画布上绘制。
for（设x=0；x<2；x++）{
for（设y=0；y<2；y++）{
ctx.drawImage（myImages[x*2+y]，x*size/2，y*size/2）；
}
}
//重置画布绘制模式。
//从技术上讲，这不是必须的，但是一个很好的做法是让事情按照你发现的方式进行。
ctx.globalCompositeOperation=“source over”
对不起，如果我的控制盘有5或7个切片，drawImage的循环会是什么样子？