JS、canvas画一个圆锥实现代码-js教程-PHP中文网

首页

web前端

js教程

JS、canvas画一个圆锥实现代码

小云云

Dec 14, 2017 am 09:28 AM

canvasjavascript代码

本文主要给大家讲解html中用canvas函数配合JS画出一个圆锥形的图形实例，有需要的朋友学习测试下吧，希望能帮帮助到大家。

以下是我们给大家分享是实例代码：

<html>
<head>
<title>我的第一个 HTML 页面</title>
</head>
<body>
<canvas id=&#39;cvs&#39; width=&#39;1000&#39; height="800">
</canvas>
<script>
const cvs =document.getElementById(&#39;cvs&#39;);

 // 计算画布的宽度
  const width = cvs.offsetWidth;
  // 计算画布的高度
 const  height = cvs.offsetHeight;
const ctx = cvs.getContext(&#39;2d&#39;);
  // 设置宽高
  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:[&#39;#76e3ff&#39;,&#39;#2895ea&#39;],
height:60
},
{
color:[&#39;#17ead9&#39;,&#39;#5d7ce9&#39;],
height:30
},
{
color:[&#39;#1ca5e5&#39;,&#39;#d381ff&#39;],
height:40
},
{
color:[&#39;#ffa867&#39;,&#39;#ff599e&#39;],
height:70
},
{
color:[&#39;#ffa6e3&#39;,&#39;#ec6a70&#39;],
height:50
},
{
color:[&#39;#f9c298&#39;,&#39;#d9436a&#39;],
height:30
},
{
color:[&#39;#eb767b&#39;,&#39;#9971dc&#39;],
height:30
},
{
color:[&#39;#f06af9&#39;,&#39;#5983ff&#39;],
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=&#39;top&#39;;
ctx.textAlign=&#39;center&#39;;
const fontSize = item.height/2>=40?40:item.height/2;
ctx.font = fontSize + &#39;px serif&#39;;
//const textMetrics = ctx.measureText(&#39;Hello World&#39;);
ctx.fillStyle = &#39;#ffffff&#39;;
ctx.fillText(&#39;5000&#39;,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 = &#39;#a4a4a4&#39;; 
ctx.beginPath(); 
ctx.moveTo(xLineA , 0); 
ctx.lineTo(xLine +20, 0); 
ctx.stroke();
ctx.restore();
//描述文字
ctx.save();
ctx.translate(cX , cY );
ctx.textBaseline=&#39;middle&#39;;
ctx.textAlign=&#39;left&#39;;
ctx.font = &#39;22px serif&#39;;
//const textMetrics = ctx.measureText(&#39;Hello World&#39;);
ctx.fillStyle = &#39;#4a4a4a&#39;;
ctx.fillText(&#39;进入收件列表2&#39;,xLine+gap ,0);
ctx.restore();
//转化率文字
ctx.save();
ctx.translate(cX , cY );
ctx.textBaseline=&#39;middle&#39;;
ctx.textAlign=&#39;left&#39;;
ctx.font = &#39;28px bold serif &#39;;
ctx.fillStyle = &#39;#007dfd&#39;;
ctx.fillText(&#39;20%&#39;,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画一个圆锥实现代码的详细内容。更多信息请关注PHP中文网其他相关文章！

声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

使用Next.js（后端集成）构建多租户SaaS应用程序Apr 11, 2025 am 08:23 AM

我使用您的日常技术工具构建了功能性的多租户SaaS应用程序（一个Edtech应用程序），您可以做同样的事情。首先，什么是多租户SaaS应用程序？多租户SaaS应用程序可让您从唱歌中为多个客户提供服务

如何使用Next.js（前端集成）构建多租户SaaS应用程序Apr 11, 2025 am 08:22 AM

本文展示了与许可证确保的后端的前端集成，并使用Next.js构建功能性Edtech SaaS应用程序。前端获取用户权限以控制UI的可见性并确保API要求遵守角色库

JavaScript：探索网络语言的多功能性Apr 11, 2025 am 12:01 AM

JavaScript是现代Web开发的核心语言，因其多样性和灵活性而广泛应用。1)前端开发：通过DOM操作和现代框架（如React、Vue.js、Angular）构建动态网页和单页面应用。2)服务器端开发：Node.js利用非阻塞I/O模型处理高并发和实时应用。3)移动和桌面应用开发：通过ReactNative和Electron实现跨平台开发，提高开发效率。

JavaScript的演变：当前的趋势和未来前景Apr 10, 2025 am 09:33 AM

JavaScript的最新趋势包括TypeScript的崛起、现代框架和库的流行以及WebAssembly的应用。未来前景涵盖更强大的类型系统、服务器端JavaScript的发展、人工智能和机器学习的扩展以及物联网和边缘计算的潜力。

神秘的JavaScript：它的作用以及为什么重要Apr 09, 2025 am 12:07 AM

JavaScript是现代Web开发的基石，它的主要功能包括事件驱动编程、动态内容生成和异步编程。1)事件驱动编程允许网页根据用户操作动态变化。2)动态内容生成使得页面内容可以根据条件调整。3)异步编程确保用户界面不被阻塞。JavaScript广泛应用于网页交互、单页面应用和服务器端开发，极大地提升了用户体验和跨平台开发的灵活性。