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 相关文章推荐
Json对象替换字符串占位符实现代码
Nov 17 Javascript
JavaScript 注册事件代码
Jan 27 Javascript
javascript中获取下个月一号,是星期几
Jun 01 Javascript
邮箱下拉自动填充选择示例代码附图
Apr 03 Javascript
JavaScript定时显示广告代码分享
Mar 02 Javascript
JavaScript中操作字符串之localeCompare()方法的使用
Jun 06 Javascript
举例讲解JavaScript中将数组元素转换为字符串的方法
Oct 25 Javascript
纯前端JavaScript实现Excel IO案例分享
Aug 26 Javascript
js根据需要计算数组中重复出现某个元素的个数
Jan 18 Javascript
ES6 Array常用扩展的应用实例分析
Jun 26 Javascript
node.js中process进程的概念和child_process子进程模块的使用方法示例
Feb 11 Javascript
基于ajax及jQuery实现局部刷新过程解析
Sep 12 jQuery
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
安装PHP可能遇到的问题“无法载入mysql扩展” 的解决方法
2007/04/16 PHP
在普通HTTP上安全地传输密码
2007/07/21 PHP
用php简单实现加减乘除计算器
2014/01/06 PHP
PHP整数取余返回负数的相关解决方法
2014/05/15 PHP
Joomla语言翻译类Jtext用法分析
2016/05/05 PHP
CentOS下搭建PHP环境与WordPress博客程序的全流程总结
2016/05/07 PHP
详解yii2实现分库分表的方案与思路
2017/02/03 PHP
PHP按一定比例压缩图片的方法
2018/10/12 PHP
Linux下源码包安装Swoole及基本使用操作图文详解
2019/04/02 PHP
jquery删除指定的html标签并保留标签内文本内容的方法
2014/04/02 Javascript
JavaScript实现的encode64加密算法实例分析
2015/04/15 Javascript
Jqgrid之强大的表格插件应用
2015/12/02 Javascript
详解jquery事件delegate()的使用方法
2016/01/25 Javascript
微信小程序wx:for和wx:for-item的用法详解
2018/04/01 Javascript
vue实现网络图片瀑布流 + 下拉刷新 + 上拉加载更多(步骤详解)
2020/01/14 Javascript
基于PHP pthreads实现多线程代码实例
2020/06/24 Javascript
解决vue项目打包上服务器显示404错误,本地没出错的问题
2020/11/03 Javascript
python实现多线程采集的2个代码例子
2014/07/07 Python
收集的几个Python小技巧分享
2014/11/22 Python
Django-xadmin+rule对象级权限的实现方式
2020/03/30 Python
Python中生成ndarray实例讲解
2021/02/22 Python
解决pycharm 格式报错tabs和space不一致问题
2021/02/26 Python
外国语学院毕业生自荐信
2013/10/28 职场文书
社区庆八一活动方案
2014/02/02 职场文书
给领导的检讨书
2014/02/16 职场文书
会计师职业生涯规划范文
2014/02/18 职场文书
丧事主持词大全
2014/04/02 职场文书
应届大专毕业生自我鉴定
2014/04/08 职场文书
英语教师求职信
2014/06/16 职场文书
公务员中国梦演讲稿
2014/08/19 职场文书
小学生志愿者活动方案
2014/08/23 职场文书
2014大学生职业生涯规划书最新范文
2014/09/13 职场文书
工程质检员岗位职责
2015/04/08 职场文书
如何利用python和DOS获取wifi密码
2021/03/31 Python
Unity连接MySQL并读取表格数据的实现代码
2021/06/20 MySQL
css弧边选项卡的项目实践
2023/05/07 HTML / CSS