欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

JS+canvas画一个圆锥实例代码

程序员文章站 2022-05-03 09:09:22
以下是我们给大家分享是实例代码: 我的第一个 html 页面</title...</div> <div class="content"> <p>以下是我们给大家分享是实例代码:</p> <div class="jb51code"> <pre class="brush: javascript;"> <html> <head> <title>我的第一个 html 页面</title> </head> <body> <canvas id='cvs' width='1000' height="800"> </canvas> <script> const cvs =document.getelementbyid('cvs'); // 计算画布的宽度 const width = cvs.offsetwidth; // 计算画布的高度 const height = cvs.offsetheight; const ctx = cvs.getcontext('2d'); // 设置宽高 cvs.width = width; cvs.height = height; /** ctx:context x,y:偏移 纵横坐标 w:度 h:高 color:颜色 数组,可以把颜色提取出来方便自定义 */ var cone = function(ctx,x,y,w,h,d,color){ ctx.save(); ctx.translate(x, y); var blockheight=h; // 中点 var x2 = 0; var y2 = 20; var k2 = 10; var w2 = w; var h2 = h; // 递减度 var decrease = d; ctx.beginpath(); ctx.moveto(x2+w2,y2); // 椭圆加了边框,所以加1减1 ctx.beziercurveto(x2+w2, y2+k2, x2-w2, y2+k2, x2-w2-1, y2); ctx.lineto(x2-w2+decrease,y2+blockheight); ctx.beziercurveto(x2-w2+decrease, y2+blockheight+k2, x2+w2-decrease, y2+blockheight+k2, x2+w2-decrease, y2+blockheight); ctx.lineto(x2+w2+1,y2); var linear = ctx.createlineargradient(x2-w2, y2,x2+w2-decrease, y2+blockheight); linear.addcolorstop(0,color[0]); linear.addcolorstop(1,color[1]); ctx.fillstyle = linear ; ctx.strokestyle=linear ctx.fill(); //ctx.stroke(); ctx.closepath(); //画椭圆 ctx.beginpath(); ctx.moveto(x2-w2, y2); ctx.beziercurveto(x2-w2, y2-k2, x2+w2, y2-k2, x2+w2, y2); ctx.beziercurveto(x2+w2, y2+k2, x2-w2, y2+k2, x2-w2, y2); var linear = ctx.createlineargradient(x2-w2, y2,x2+w2-decrease, y2+blockheight); linear.addcolorstop(1,color[0]); linear.addcolorstop(0,color[1]); ctx.fillstyle = linear ; ctx.strokestyle=linear ctx.closepath(); ctx.fill(); ctx.stroke(); ctx.restore(); }; function dr(m){ const colorlist =[ { color:['#76e3ff','#2895ea'], height:60 }, { color:['#17ead9','#5d7ce9'], height:30 }, { color:['#1ca5e5','#d381ff'], height:40 }, { color:['#ffa867','#ff599e'], height:70 }, { color:['#ffa6e3','#ec6a70'], height:50 }, { color:['#f9c298','#d9436a'], height:30 }, { color:['#eb767b','#9971dc'], height:30 }, { color:['#f06af9','#5983ff'], height:100 }, ]; const space = 20; let coneheight = 0; // 间隔 const gap = 20; const x = 380; const y = 20; const angle = 30; let conewidth=0; colorlist.foreach((item)=>{ coneheight += item.height +space; }); // 最下面的先画(层级) colorlist.reverse().foreach((item,index)=>{ const decrease =math.tan(math.pi*angle/180)*(item.height+space); conewidth=conewidth + decrease; coneheight = coneheight-item.height - space; //圆锥 cone(ctx,x,coneheight ,conewidth ,item.height,decrease,item.color); // 中点 const cx =parseint(x)+0.5; const cy = parseint(coneheight + space+ item.height/2)+0.5; //文字 ctx.save(); ctx.translate(cx , cy ); ctx.textbaseline='top'; ctx.textalign='center'; const fontsize = item.height/2>=40?40:item.height/2; ctx.font = fontsize + 'px serif'; //const textmetrics = ctx.measuretext('hello world'); ctx.fillstyle = '#ffffff'; ctx.filltext('5000',0,-fontsize/3); ctx.restore(); const xlinea =parseint(conewidth-decrease/2)+10; const xline =parseint(m+xlinea )>=x?x:m+xlinea ; //线 ctx.save(); ctx.translate(cx , cy ); ctx.setlinedash([3,2]); ctx.strokestyle = '#a4a4a4'; ctx.beginpath(); ctx.moveto(xlinea , 0); ctx.lineto(xline +20, 0); ctx.stroke(); ctx.restore(); //描述文字 ctx.save(); ctx.translate(cx , cy ); ctx.textbaseline='middle'; ctx.textalign='left'; ctx.font = '22px serif'; //const textmetrics = ctx.measuretext('hello world'); ctx.fillstyle = '#4a4a4a'; ctx.filltext('进入收件列表2',xline+gap ,0); ctx.restore(); //转化率文字 ctx.save(); ctx.translate(cx , cy ); ctx.textbaseline='middle'; ctx.textalign='left'; ctx.font = '28px bold serif '; ctx.fillstyle = '#007dfd'; ctx.filltext('20%',xline+gap ,(item.height+gap)/2 ); ctx.restore(); }); } let m=0; let gravity =10; (function drawframe(){ window.requestanimationframe(drawframe,cvs); ctx.clearrect(0,0,cvs.width,cvs.height); m += gravity; dr(m); })(); </script> </body> </html> </pre> </div> <p>这是测试后的完成图:</p> <p><img onerror="this.src='/statics/superweb999/images/image_error.jpg'"src="/default/index/img?u=aHR0cDovL2ltYWdlcy4xMHFpYW53YW4uY29tLzEwcWlhbndhbi8yMDE4MDIyNC9iXzFfMjAxODAyMjQxNDI1MTI1MTkwLmpwZw==" alt="JS+canvas画一个圆锥实例代码" title="JS+canvas画一个圆锥实例代码"></p> </div> <div class="info-pre-next"> <p> 上一篇: <a href="/article/835095.html"> vue实现nav导航栏的方法 </a> </p> <p> 下一篇: <a href="/article/835097.html"> Android属性动画AnimatorSet源码简单分析 </a> </p> </div> <div class="wz_tuijian"> <p> 推荐阅读 </p> <ul> <li> <a href="/article/2195773.html" target="_blank" title="javascript原生封装一个淡入淡出效果的函数测试实例代码"> <h2> javascript原生封装一个淡入淡出效果的函数测试实例代码 </h2> </a> </li> <li> <a href="/article/2192207.html" target="_blank" title="Vue组件内部实现一个双向数据绑定的实例代码"> <h2> Vue组件内部实现一个双向数据绑定的实例代码 </h2> </a> </li> <li> <a href="/article/2186197.html" target="_blank" title="Java编程基于快速排序的三个算法题实例代码"> <h2> Java编程基于快速排序的三个算法题实例代码 </h2> </a> </li> <li> <a href="/article/2181609.html" target="_blank" title="js代码延迟一定时间后执行一个函数的实例"> <h2> js代码延迟一定时间后执行一个函数的实例 </h2> </a> </li> <li> <a href="/article/2155144.html" target="_blank" title="11个Python Pandas小技巧让你的工作更高效(附代码实例)"> <h2> 11个Python Pandas小技巧让你的工作更高效(附代码实例) </h2> </a> </li> <li> <a href="/article/2139679.html" target="_blank" title="js代码延迟一定时间后执行一个函数的实例"> <h2> js代码延迟一定时间后执行一个函数的实例 </h2> </a> </li> <li> <a href="/article/2135056.html" target="_blank" title="8个必备的PHP功能实例代码"> <h2> 8个必备的PHP功能实例代码 </h2> </a> </li> <li> <a href="/article/2130303.html" target="_blank" title="python下10个简单实例代码"> <h2> python下10个简单实例代码 </h2> </a> </li> <li> <a href="/article/2126398.html" target="_blank" title="js取0-9随机取4个数不重复的数字代码实例"> <h2> js取0-9随机取4个数不重复的数字代码实例 </h2> </a> </li> <li> <a href="/article/2116253.html" target="_blank" title="video.js 一个页面同时播放多个视频的实例代码"> <h2> video.js 一个页面同时播放多个视频的实例代码 </h2> </a> </li> </ul> </div> </article> </div> </main> <footer><div class="box"><div class="ft_nav"><div class="ft_about"><p>关于网站</p><ul><li><a href="/sitemap.xml" target="_blank" title="网站地图">网站地图</a></li><li><a href="/list/2/" title="最新程序员文章站">最新程序员文章站</a></li></ul></div><div class="ft_contact"><ul><li>本站所有数据收集于网络如有侵犯到您的权益,请联系我们进行下架处理。</li><li class="email_show"></li></ul></div></div><div class="copyright"><div class="cr_left"><p> 备案号:<a href="https://beian.miit.gov.cn/#/Integrated/index" target="_blank">粤ICP备20058927号</a></p><p>© Copyright © 2020-2022 www.superweb999.com 程序员文章站. </p></div></div></div></footer> </body> </html>