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>