Javascript 如何在HTML5画布中绘制云形状？

我正在使用HTML5画布和javascript绘制不同的形状。但我没有计算在HTML5画布上绘制云的形状。 我正在尝试使用2个点（即起点和终点）绘制云形状。 请提出一些想法？ 谢谢参考链接：

var canvas=document.getElementById（'myCanvas'）；
var context=canvas.getContext（'2d'）；
//画云
context.beginPath（）；
上下文。moveTo（170,80）；
贝塞尔曲线图（130100130150230150）；
贝塞尔曲线图（250180320180340150）；
贝塞尔曲线图（420150420120390100）；
贝塞尔曲线图（430、40370、30340、50）；
贝塞尔曲线图（320,5250,20250,50）；
贝塞尔曲线图（200,5150,20170,80）；
closePath（）；
context.lineWidth=5；
context.fillStyle='#8ED6FF'；
context.fill（）；
context.strokeStyle='#0000ff'；
stroke（）；
//将画布图像另存为数据url（默认为png格式）
var dataURL=canvas.toDataURL（）；
//将canvasImg image src设置为dataURL
//因此可以将其保存为图像
document.getElementById（'canvasImg'）。src=dataURL
正文{
边际：0px；
填充：0px；
}
您可以使用圆弧方法创建云形状。看看这个


var canvas=document.querySelector（'canvas'）；
var c=canvas.getContext（'2d'）；
常数drawCloud=（x，y）=>{
c、 beginPath（）；
c、 弧（x，y，60，Math.PI*0.5，Math.PI*1.5）；
c、 弧（x+70，y-60，70，Math.PI*1，Math.PI*1.85）；
c、 弧（x+152，y-45，50，Math.PI*1.37，Math.PI*1.91）；
c、 弧（x+200，y，60，Math.PI*1.5，Math.PI*0.5）；
c、 移动到（x+200，y+60）；
c、 lineTo（x，y+60）；
c、 strokeStyle='#797874'；
c、 笔划（）；
c、 fillStyle='#8ED6FF'；
c、 填充（）
}
抽丝云（100135）
正文{
边际：0px；
填充：0px；
}
请参见图片，为画布html5中的绘制云选择代码
[1] ：
看看这个post@Elior我已经研究过这个解决方案，但这种方法（即makeCloud）是用随机形状绘制云。这里我想要一个固定的云形状，每次我绘制云注释时，它都以相同的方式绘制。正如我们在MS-WORD云形状中所看到的，您可以使用具有固定坐标的重叠椭圆形状。因此，每次云的形状都是相同的shape@InsaneCoder你能用代码解释一下吗？嗨，麻省理工学院我的答案对你很有帮助…有没有通用的方法来画云。我已经研究过这个示例，但它不像MS-WORD CLOUD那样绘制。让我检查一下我的WORD您是否询问云标记？在MS-WORD goto INSERT->SHAPES->Callout->4th one中shape@MIT-真的吗？您要求对MSWord的一个组件进行编码，而自己甚至都不做任何尝试？请将代码作为代码而不是图像发布。有屏幕阅读器的人无法阅读图像，没有人可以剪切或粘贴图像，也无法搜索图像。