通过JavaScript使用Canvas，如何在Y参数内绘制X次图片？

我试着画一个笑脸X次，然后笑脸是画布中心的Y半径。我还想添加一个函数，允许绘图停留在画布内，而不是在画布外，以及两个函数，以允许圆圈中的笑脸的最大数量和它可以达到的最大半径。最终，我希望我的最终产品最终看起来像这样：。我是画布新手，非常感谢您的帮助

CPSC 1045任务7-斯迈利旋转器
CPSC 1045任务7-Simley旋转器
输入要绘制的微笑数

输入距画布中心的距离以绘制它们

绘制

设c，ctx，pos，centerX，centerY，radius，eyeraradius，eyeXOffset，eyeyyoffset
document.getElementById（“draw”）.onclick=checkNumber；
document.getElementById（“draw”）.onclick=checkRadius；
函数放置（）{
c=document.getElementById（“myCanvas”）；
ctx=c.getContext（“2d”）；
中心x=c.宽度/2；
中心Y=c.高度/2；
半径=70；
眼半径=10；
眼偏移=25；
眼偏移=20；
重置（）；
}
函数drawFace（）{
//画黄色的圆圈
ctx.beginPath（）；
ctx.弧（中心X+位置左侧，中心Y+位置顶部，半径0，2*Math.PI，假）；
ctx.fillStyle='黄色'；
ctx.fill（）；
ctx.lineWidth=5；
ctx.strokeStyle=‘黑色’；
ctx.stroke（）；
ctx.closePath（）；
}
函数是（）{
//吸引眼球
让eyeX=中心X+位置左侧-eyeXOffset；
设eyeY=中心位置+顶部位置-eyeYOffset；
ctx.beginPath（）；
ctx.arc（eyeX，eyeY，eyeRadius，0,2*Math.PI，false）；
ctx.fillStyle='黑色'；
ctx.fill（）；
ctx.closePath（）；
ctx.beginPath（）；
eyeX=中心X+位置左侧+eyeXOffset；
ctx.arc（eyeX，eyeY，eyeRadius，0,2*Math.PI，false）；
ctx.fillStyle='黑色'；
ctx.fill（）；
ctx.closePath（）；
}
函数drawMouth（）{
//张嘴
ctx.beginPath（）；
ctx.弧（中心X+位置左侧，中心Y+位置顶部，50,0，数学PI，假）；
ctx.stroke（）；
ctx.closePath（）；
}
函数图（x，y）{
清除（）；
drawFace（）；
是的（）；
drawMouth（）；
}
函数clear（）{
ctx.clearRect（0，0，c.宽度，c.高度）；
}
函数checkNumber（）{
var输入=document.getElementById（“NumberofSmiles”）.value；
如果（输入>9）{
警报（“您输入了一个无效的号码”）；
}
}
函数checkRadius（）{
var输入=document.getElementById（“半径”）.value；
如果（输入>150）{
警报（“您输入的半径无效”）；
}
}
函数checkmyvalue（）{
检查半径（）；
checkNumber（）；
}

我已尝试从您的代码中尽可能多地节省。 由于要旋转笑脸，我将围绕画布原点绘制笑脸，然后转换到该位置并旋转上下文：

  ctx.translate(pos.left,pos.top)
  ctx.rotate(Angle);

我做的另一个改变是：我改变了笑脸的半径，因为我认为它太大了，但是你可以根据你的需要改变它。其他一切都将按比例扩展

我希望这就是你需要的

const c=document.getElementById（“myCanvas”）；
const ctx=c.getContext（“2d”）；
设中心={}；
中心x=c.宽度/2；
中心y=c.高度/2；
让面_半径=30；
让眼半径=面半径/7；
口_半径=面_半径*0.7；
让eyeXOffset=面_半径*0.36；
让眼偏移=面_半径*0.28；
函数drawFace（）{
//画黄色的圆圈
ctx.beginPath（）；
ctx.弧（0,0，面_半径，0,2*Math.PI，假）；
ctx.fillStyle=“黄色”；
ctx.fill（）；
ctx.lineWidth=5；
ctx.strokeStyle=“黑色”；
ctx.stroke（）；
ctx.closePath（）；
}
函数是（）{
//吸引眼球
设eyeX=-eyeXOffset；
设eyeY=-eyeyyoffset；
ctx.beginPath（）；
ctx.arc（eyeX，eyeY，eyeRadius，0,2*Math.PI，false）；
ctx.fillStyle=“黑色”；
ctx.fill（）；
ctx.closePath（）；
ctx.beginPath（）；
eyeX=eyeXOffset；
ctx.arc（eyeX，eyeY，eyeRadius，0,2*Math.PI，false）；
ctx.fillStyle=“黑色”；
ctx.fill（）；
ctx.closePath（）；
}
函数drawMouth（）{
//张嘴
ctx.beginPath（）；
ctx.弧（0，0，嘴半径，0，数学PI，假）；
ctx.stroke（）；
ctx.closePath（）；
}
函数clear（）{
ctx.clearRect（0，0，c.宽度，c.高度）；
}
函数drawSmiley（位置、角度）{
ctx.save（）；
ctx.平移（位置左侧，位置顶部）
ctx.旋转（角度）；
drawFace（）；
是的（）；
drawMouth（）；
ctx.restore（）；
}
函数checkNumber（）{
设n=parseInt（NumberofSmiles.value）；
如果（n>0&&n<9）{
返回n；
}否则{
警报（“您输入了一个无效的号码”）；
清除（）；
}
}
函数checkRadius（）{
设R=parseInt（_radius.value）；
设maxR=c.width/2-面半径
如果（R>0&&R
canvas{border:1px solid}
CPSC 1045作业7-辛利旋转器
输入要绘制的微笑数

输入距画布中心的距离以绘制它们

绘制

非常感谢您。我只是缺少了ctx.translate和ctx.rotate（角度）？再次感谢你的帮助