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 相关文章推荐
JS根据年月获得当月天数的实现代码
Jul 03 Javascript
javascript实现获取服务器时间
May 19 Javascript
javascript简单实现等比例缩小图片的方法
Jul 27 Javascript
JS数字千分位格式化实现方法总结
Dec 16 Javascript
Vue.js中用webpack合并打包多个组件并实现按需加载
Feb 17 Javascript
vue-cli 如何打包上线的方法示例
May 08 Javascript
Vue中$refs的用法详解
Jun 24 Javascript
Angularjs 根据一个select的值去设置另一个select的值方法
Aug 13 Javascript
微信小程序+腾讯地图开发实现路径规划绘制
May 22 Javascript
JavaScript进制转换实现方法解析
Jan 18 Javascript
Element Steps步骤条的使用方法
Jul 26 Javascript
TypeScript魔法堂之枚举的超实用手册
Oct 29 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
PHP新手上路(十二)
2006/10/09 PHP
基于PHP 面向对象之成员方法详解
2013/05/04 PHP
PHP中使用imagick实现把PDF转成图片
2015/01/26 PHP
php基于openssl的rsa加密解密示例
2016/07/11 PHP
JavaScript的目的分析
2007/01/05 Javascript
JavaScript实现动态增加文件域表单
2009/02/12 Javascript
jquery动态增加text元素以及删除文本内容实例代码
2013/07/01 Javascript
javascript判断是否按回车键并解决浏览器之间的差异
2014/05/13 Javascript
jQuery实现点击查看大图并以弹框的形式居中
2016/08/08 Javascript
JavaScript使用Range调色及透明度实例
2016/09/25 Javascript
jquery控制页面的展开和隐藏实现方法(推荐)
2016/10/15 Javascript
JS判断是否手机或pad访问实现方法
2016/12/09 Javascript
基于ionic实现下拉刷新功能
2018/05/10 Javascript
微信小程序methods中定义的方法互相调用的实例代码
2018/08/07 Javascript
Vue.js的动态组件模板的实现
2018/11/26 Javascript
vue+iview动态渲染表格详解
2019/03/19 Javascript
vue实现购物车案例
2020/05/30 Javascript
python生成器表达式和列表解析
2016/03/10 Python
Python的Tornado框架实现异步非阻塞访问数据库的示例
2016/06/30 Python
django上传图片并生成缩略图方法示例
2017/12/11 Python
Python基于递归和非递归算法求两个数最大公约数、最小公倍数示例
2018/05/21 Python
python 移除字符串尾部的数字方法
2018/07/17 Python
12个步骤教你理解Python装饰器
2019/07/01 Python
python 一个figure上显示多个图像的实例
2019/07/08 Python
使用Django和Postgres进行全文搜索的实例代码
2020/02/13 Python
详解python中groupby函数通俗易懂
2020/05/14 Python
使用CSS3制作倾斜导航条和毛玻璃效果
2017/09/12 HTML / CSS
移动端Html5页面生成图片解决方案
2018/08/07 HTML / CSS
Java面试中常遇到的问题,也是需要注意的几点
2013/08/30 面试题
北京-环亚运商测试题.net程序员初步测试题
2013/05/28 面试题
后勤人员自我鉴定
2013/10/20 职场文书
信息技术专业大学生职业生涯规划书
2014/01/24 职场文书
公司聘任书模板
2014/03/29 职场文书
产品销售计划书
2014/05/04 职场文书
化工专业求职信
2014/07/01 职场文书
2015年乡镇人大工作总结
2015/04/22 职场文书