下面是我们与您分享示例代码：

htmlheadtitle我的第一个超文本标记语言页面/title/head dycanvas id=' CVS ' width=' 1000 ' height=' 800 '/canlasscriptconst CVS=document。getelementbyid(' CVS ')；//计算画布的宽度恒定宽度=cvs.offsetWidth//计算画布的高度恒定高度=cvs . offset CTX恒定高度=CVS。GetContext(' 2d ')；//设置宽高cvs.width=widthcvs.height=高度；/**ctx:contextx，y:偏移纵横坐标w:度h:高颜色：颜色数组，可以把颜色提取出来方便自定义*/var Cone=函数(ctx，x，y，w，h，d，color){ CTX。save()；ctx.translate(x，y)；可变砌块高度=h；//中点var x2=0；var y2=20 var k2=10 var w2=w；var H2=h；//递减度定义变量减少=d；CTX。begin path()；ctx.moveTo(x2 w2，y2)；//椭圆加了边框，所以加一减1ctx。beziercerveto(x2 w2，y2 k2，x2-w2，y2 k2，x2-w2-1，y2)；ctx.lineTo(x2-w2减小，y2块高度)；CTX。beziercerveto(x2-w2减少，y2区块高度k2，x2 w2减少，y2区块高度k2，x2 w2减少，y2区块高度);ctx.lineTo(x2 w2 1，y2)；var线性=CTX。createlinegradient(x2-w2，y2，x2 w2-reduce，y2块高度)；linear.addColorStop(0，color[0])；linear.addColorStop(1，color[1])；ctx.fillStyle=线性；CTX。线性CTX。fill()；//CTX。笔画()；CTX。close path()；//画椭圆CTX。begin path()；ctx.moveTo(x2-w2，y2)；CTX。beziercerveto(x2-w2，y2-k2，x2 w2，y2-k2，x2 w2，y2)；CTX。beziercerveto(x2 w2，y2 k2，x2-w2，y2 k2，x2-w2，y2)；var线性=CTX。createlinegradient(x2-w2，y2，x2 w2-reduce，y2块高度)；linear.addColorStop(1，color[0])；linear.addColorStop(0，color[1])；ctx.fillStyle=线性；CTX。线性CTX。close path()；CTX。fill()；CTX。笔画()；CTX。restore()；};函数dr(m){ const color rist=[{ color :[' # 76e 3ff '，' #2895ea']，height:60}，{color:['#17ead9 '，' #5d7ce9']，height:30}，{color:['#1ca5e5 '，' #d381ff']，height:40}，{ color 33:40 }让锥形头=0；//间隔常数间隙=20常数=30常数y=20常数角度=30让conewidth=0；颜色列表。foreach((item)={ conehead=item。高度空间；});//最下面的先画（层级)colorList.reverse().forEach(项目，索引)={ const reduce=Math。棕褐色(数学PI *角度/180)*(项目。高度空间);锥宽=锥宽减小；锥体高度=锥体高度-项目。高度空间；//圆锥圆锥体(ctx，x，coneHeight，coneWidth，item.height，reduce，item。颜色)；//中点const Cx=ParSeint(x)0.5；const Cy=parsent(cone head space item . height/2)0.5；//文字CTX。save()；ctx.translate(cX，Cy)；文本基线=' topctx . textalign=' center const font size=item.height/2=40?40:item.height/2;ctx.font=font size ' px衬线；//const textMetrics=CTX。测量文本(“你好世界”)；CTX . FillStyle=' # ffffctx . FillText '(5000 '，0，-font size/3)；CTX。restore()；const xLineA=ParSeint(ConEwidth-reduce/2)10；const xLine=parseInt(m xLineA )=x？x:m xLineA//线CTX。save()；ctx.translate(cX，Cy)；ctx.setLineDash([3，2])；ctx.strokeStyle=' # a4a4a4CTX。begin path()；ctx.moveTo(xLineA，0)；ctx.lineTo(xLine 20，0)；CTX。笔画()；CTX。restore()；//描述文字CTX。save()；ctx.translate(cX，Cy)；CTX . text baseline=' middlectx . textalign=' left CTX . font=' 22px衬线；//const textMetrics=CTX。测量文本(“你好世界”)；CTX . FillStyle=' # 4a 4a ' CTX . FillText('进入收件列表2 '，xLine间隙，0);CTX。restore()；//转化率文字CTX。save()；ctx.translate(cX，Cy)；CTX . text baseline=' middlectx . textalign=' left CTX . font=' 28px粗体衬线；CTX . FillStyle=' # 007 DFD CTX . FillText(' 20% '，xLine间隙，(项。高度间隙)/2)；CTX。restore()；});}让m=0；让重力=10;（函数draw frame(){ window。requestanimationframe(绘制框架，CVS)；ctx.clearRect(0，0，cvs.width，cvs。高度)；m=重力；博士(m)；})();/脚本/正文/html这是我们测试后的完成图：