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


Posted in Javascript onDecember 13, 2017

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

<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+canvas画一个圆锥实例代码

Javascript 相关文章推荐
将HTML自动转为JS代码
Jun 26 Javascript
一个js封装的不错的选项卡效果代码
Feb 15 Javascript
js实现俄罗斯方块小游戏分享
Jan 31 Javascript
详解javascript传统方法实现异步校验
Jan 22 Javascript
JS面向对象(3)之Object类,静态属性,闭包,私有属性, call和apply的使用,继承的三种实现方法
Feb 25 Javascript
jquery轮播的实现方式 附完整实例
Jul 28 Javascript
微信小程序 数据绑定详解及实例
Oct 25 Javascript
高效的jQuery代码编写技巧总结
Feb 22 Javascript
微信小程序实现的日期午别医生排班表功能示例
Jan 09 Javascript
详解Vue+Element的动态表单,动态表格(后端发送配置,前端动态生成)
Apr 20 Javascript
vant IndexBar实现的城市列表的示例代码
Nov 20 Javascript
关于Node.js中频繁修改代码重启服务器的问题
Oct 15 Javascript
JS排序算法之冒泡排序,选择排序与插入排序实例分析
Dec 13 #Javascript
实例分析js事件循环机制
Dec 13 #Javascript
javascript实现QQ空间相册展示源码
Dec 12 #Javascript
自定义PC微信扫码登录样式写法
Dec 12 #Javascript
基于模板引擎Jade的应用(详解)
Dec 12 #Javascript
jquery获取transform里的值实现方法
Dec 12 #jQuery
JS排序算法之希尔排序与快速排序实现方法
Dec 12 #Javascript
You might like
通过html表格发电子邮件
2006/10/09 PHP
php中对xml读取的相关函数的介绍一
2008/06/05 PHP
php页面防重复提交方法总结
2013/11/25 PHP
PHP实现的迪科斯彻(Dijkstra)最短路径算法实例
2017/09/16 PHP
jquery向.ashx文件post中文乱码问题的解决方法
2011/03/28 Javascript
javascript通过className来获取元素的简单示例代码
2014/01/10 Javascript
js调用浏览器打印模块实现点击按钮触发自定义函数
2014/03/21 Javascript
12种JavaScript常用的MVC框架比较分析
2015/11/16 Javascript
Bootstrap组件学习之导航、标签、面包屑导航(精品)
2016/05/17 Javascript
浅谈jquery之on()绑定事件和off()解除绑定事件
2016/10/26 Javascript
JS基于递归算法实现1,2,3,4,5,6,7,8,9倒序放入数组中的方法
2017/01/03 Javascript
关于vuejs中v-if和v-show的区别及v-show不起作用问题
2018/03/26 Javascript
跨域请求两种方法 jsonp和cors的实现
2018/11/11 Javascript
手挽手带你学React之React-router4.x的使用
2019/02/14 Javascript
详解Vue的watch中的immediate与watch是什么意思
2019/12/30 Javascript
JS画布动态实现黑客帝国背景效果
2020/11/08 Javascript
[47:31]完美世界DOTA2联赛PWL S3 INK ICE vs DLG 第一场 12.12
2020/12/16 DOTA
在Python中处理字符串之ljust()方法的使用简介
2015/05/19 Python
浅谈Django REST Framework限速
2017/12/12 Python
python字符串的方法与操作大全
2018/01/30 Python
Python SqlAlchemy动态添加数据表字段实例解析
2018/02/07 Python
浅谈python正则的常用方法 覆盖范围70%以上
2018/03/14 Python
python 实现一个反向单位矩阵示例
2019/11/29 Python
Django form表单与请求的生命周期步骤详解
2020/06/07 Python
聊聊python中的异常嵌套
2020/09/01 Python
魅力惠奢品线上平台:MEI.COM
2016/11/29 全球购物
生物医学工程专业学生求职信范文分享
2013/12/14 职场文书
授权委托书范本
2014/04/03 职场文书
大学活动总结范文
2014/04/29 职场文书
公共机构节能宣传周活动总结
2014/07/09 职场文书
2014年党的群众路线教育实践活动整改措施(个人版)
2014/09/25 职场文书
十八大宣传标语
2014/10/09 职场文书
幼儿园教师安全责任书
2015/05/08 职场文书
天气温馨提示语
2015/07/14 职场文书
SpringBoot生成License的实现示例
2021/06/16 Java/Android
ubuntu安装jupyter并设置远程访问的实现
2022/03/31 Python