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 相关文章推荐
JavaScript OOP类与继承
Nov 15 Javascript
js的正则test,match,exec详细解析
Jan 29 Javascript
jquery跟js初始化加载的多种方法及区别介绍
Apr 02 Javascript
黑帽seo劫持程序,js劫持搜索引擎代码
Sep 15 Javascript
JavaScript常用基础知识强化学习
Dec 09 Javascript
JavaScript的instanceof运算符学习教程
Jun 08 Javascript
js实现select选择框效果及美化
Aug 19 Javascript
bootstrap modal弹出框的垂直居中
Dec 14 Javascript
原生JS实现《别踩白块》游戏(兼容IE)
Feb 20 Javascript
vue实现弹框遮罩点击其他区域弹框关闭及v-if与v-show的区别介绍
Sep 29 Javascript
基于Vue实现电商SKU组合算法问题
May 29 Javascript
VUE注册全局组件和局部组件过程解析
Oct 10 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查看session内容的函数
2008/08/27 PHP
PHP 文件上传全攻略
2010/04/28 PHP
使用PHP求两个文件的相对路径
2013/06/20 PHP
PHP验证码函数代码(简单实用)
2013/09/29 PHP
Php中使用Select 查询语句的实例
2014/02/19 PHP
PHP微信企业号开发之回调模式开启与用法示例
2017/11/25 PHP
9个javascript语法高亮插件 推荐
2009/07/18 Javascript
JavaScript中json对象和string对象之间相互转化
2012/12/26 Javascript
JS清除IE浏览器缓存的方法
2013/07/26 Javascript
教你如何使用PHP输出中文JSON字符串
2014/05/22 Javascript
原生JS实现LOADING效果
2015/03/16 Javascript
javascript模拟命名空间
2015/04/17 Javascript
jQuery点击按钮弹出遮罩层且内容居中特效
2015/12/14 Javascript
基于jQuery的ajax方法封装
2016/07/14 Javascript
浅析JavaScript函数的调用模式
2016/08/10 Javascript
JavaScript中清空数组的方法总结
2016/12/02 Javascript
node实现登录图片验证码的示例代码
2018/04/20 Javascript
vue项目设置scrollTop不起作用(总结)
2018/12/21 Javascript
jQuery实现的简单日历组件定义与用法示例
2018/12/24 jQuery
详解小程序input框失焦事件在提交事件前的处理
2019/05/05 Javascript
微信小程序实现上拉加载功能示例【加载更多数据/触底加载/点击加载更多数据】
2020/05/29 Javascript
利用Python-iGraph如何绘制贴吧/微博的好友关系图详解
2017/11/02 Python
Python使用functools实现注解同步方法
2018/02/06 Python
python 列表删除所有指定元素的方法
2018/04/19 Python
python获取服务器响应cookie的实例
2018/12/28 Python
Django实现发送邮件找回密码功能
2019/08/12 Python
python numpy--数组的组合和分割实例
2020/02/24 Python
Python基于yaml文件配置logging日志过程解析
2020/06/23 Python
PyCharm 解决找不到新打开项目的窗口问题
2021/01/15 Python
html5使用canvas压缩图片的示例代码
2018/09/11 HTML / CSS
一份软件工程师的面试试题
2016/02/01 面试题
给排水工程师岗位职责
2013/11/21 职场文书
机械专业应届生求职信
2013/12/12 职场文书
保险内勤岗位职责
2014/04/05 职场文书
某某同志考察材料
2014/05/28 职场文书
九年级语文教学反思
2016/03/03 职场文书