本文主要给大家讲解html中用canvas函数配合js画出一个圆锥形的图形实例，有需要的朋友学习测试下吧，希望能帮帮助到大家。
以下是我们给大家分享是实例代码：
<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>
这是脚本之家测试后的完成图：
相关推荐：
js画5角星方法介绍_javascript技巧
javascript canvas实现围绕旋转动画
用canvas做出时钟实现步骤
以上就是js、canvas画一个圆锥实现代码的详细内容。