基于canvas自动化运维工具
首先我们的工具绝对顶尖，绝对绚丽。如果有需要代码，可以加我微信索取。18500591275
前几天有个客户找到我，问我这个能不能做，我看自己也干了10年前端了，实在做不了，后来人家说给你10000你能做吗？我说能考虑，什么时候我也为金钱所动了。
媳妇是药学博士，绝对的学霸，回去给我媳妇一看，说能做，我写算法，你写程序不就完事了吗？好吧，一万块钱到手
2、我们一步一步剖析绘制的过程。
首先我们初始化canves对象。
c = document.getElementById("canvas_circle");
ctx = c.getContext("2d");
设定局部的变量
radius = c.height / 2 - 60; //半径
ox = radius + 450, oy = radius + 70; //圆心
width = 30, height = 10; //图例宽和高
posX = ox * 2 + 20, posY = 30; //
textX = posX + width + 5, textY = posY + 10; img = $("#logo_name").get(0);
ctx.drawImage(img, 30, 30, 100, 800); img = $("#tuli").get(0);
ctx.drawImage(img, 1250, 100, 220, 300);
然后进行下面的一系列的操作。
//绘制外侧的饼图
DrawPie(ox, oy, radius); var innerWhiteR = radius - 100
//绘制白色圆环
drawCircular(ox, oy, innerWhiteR, "#fff") //绘制黄色圆环
var innerYellowR = radius - 130;
drawCircular(ox, oy, innerYellowR, "#fff34f") //绘制蓝色圆环
drawCircular(ox, oy, radius - 135, "#0445e1") //再次绘制蓝色圆环
drawCircular(ox, oy, radius - 140, "#3370ff")
//绘制内侧的饼图
var innerRPi = radius - 195;
DrawPie(ox, oy, innerRPi, true); var radius1 = radius + 40;
var outerSpaceR1 = radius + 20;
var outerSpaceR2 = radius + 40; var xixian = 3;
var cuxian = 15; //绘制双线
drawLine(ox, oy, 0, innerRPi, cuxian, "#fff", 7.5);
drawLine(ox, oy, 0, innerRPi, xixian, "#000", 7.5);
drawLine(ox, oy, innerYellowR, outerSpaceR2, cuxian, "#fff", 7.5);
drawLine(ox, oy, innerYellowR, outerSpaceR2, xixian, "#000", 7.5,"xiaolan","07:30 日盘开始起动系统",1); drawLine(ox, oy, 0, innerRPi, cuxian, "#fff", 8 + (45/60));
drawLine(ox, oy, 0, innerRPi, xixian, "#000", 8 + (45 / 60));
drawLine(ox, oy, innerYellowR, outerSpaceR2, cuxian, "#fff", 8 + (45 / 60));
drawLine(ox, oy, innerYellowR, outerSpaceR2, xixian, "#000", 8 + (45 / 60), "xiaohong","08:55日盘集合竞价",2); drawLine(ox, oy, 0, innerRPi, cuxian, "#fff", 15);
drawLine(ox, oy, 0, innerRPi, xixian, "#000", 15);
drawLine(ox, oy, innerYellowR, outerSpaceR2, cuxian, "#fff", 15);
drawLine(ox, oy, innerYellowR, outerSpaceR2, xixian, "#000", 15, "xiaoing",'15:00日盘毕盘开始结算',7); drawLine(ox, oy, 0, innerRPi, cuxian, "#fff", 19.5);
drawLine(ox, oy, 0, innerRPi, 2, "#000", 19.5);
drawLine(ox, oy, innerYellowR, outerSpaceR2, cuxian, "#fff", 19.5);
drawLine(ox, oy, innerYellowR, outerSpaceR2, xixian, "#000", 19.5, "xiaoing", '19:30夜盘开始起动系统',12); drawLine(ox, oy, 0, innerRPi, cuxian, "#fff", 20+(55/60));
drawLine(ox, oy, 0, innerRPi, 2, "#000", 20 + (55 / 60));
drawLine(ox, oy, innerYellowR, outerSpaceR2, cuxian, "#fff", 20 + (45 / 60));
drawLine(ox, oy, innerYellowR, outerSpaceR2, xixian, "#000", 20 + (45 / 60), "xiaoqiu", '20:55夜盘集合竞价',13); drawLine(ox, oy, 0, innerRPi, cuxian, "#fff", 23.5);
drawLine(ox, oy, 0, innerRPi, xixian, "#000", 23.5);
drawLine(ox, oy, innerYellowR, outerSpaceR2, cuxian, "#fff", 23.5);
drawLine(ox, oy, innerYellowR, outerSpaceR2, xixian, "#000", 23.5, "xiaoing","23:30 开始关闭系统",15);
//绘制双线 //绘制单线
drawLine(ox, oy, innerYellowR, innerWhiteR, xixian, "#000",9);
drawLine(ox, oy, innerWhiteR, radius, xixian, "#eee", 9);
drawLine(ox, oy, radius, outerSpaceR1, xixian, "#000", 9, "xiaoing",'9:00日盘连续交易开始',3); drawLine(ox, oy, innerYellowR, innerWhiteR, xixian, "#000", 10.25);
drawLine(ox, oy, innerWhiteR, radius, xixian, "#eee", 10.25);
drawLine(ox, oy, radius, outerSpaceR1, xixian, "#000", 10.25, "xiaoqiu","10:15日盘休市至10:30",4); drawLine(ox, oy, innerYellowR, innerWhiteR, xixian, "#000", 11.5);
drawLine(ox, oy, innerWhiteR, radius, xixian, "#eee", 11.5);
drawLine(ox, oy, radius, outerSpaceR1, xixian, "#000", 11.5, "xiaoqiu",'11:30 日盘休市至13:30',5); drawLine(ox, oy, innerYellowR, innerWhiteR, xixian, "#000", 13.5);
drawLine(ox, oy, innerWhiteR, radius, xixian, "#eee", 13.5);
drawLine(ox, oy, radius, outerSpaceR1, xixian, "#000", 13.5, "xiaoqiu", '13:30 日盘持续交易',6); drawLine(ox, oy, innerYellowR, innerWhiteR, xixian, "#000", 15.5);
drawLine(ox, oy, innerWhiteR, radius, xixian, "#eee", 15.5);
drawLine(ox, oy, radius, outerSpaceR1, xixian, "#000", 15.5, "xiaoqiu","15:30 结算完成",8); drawLine(ox, oy, innerYellowR, innerWhiteR, xixian, "#000", 16.67);
drawLine(ox, oy, innerWhiteR, radius, xixian, "#eee", 16.67);
drawLine(ox, oy, radius, outerSpaceR1, xixian, "#000", 16.67, "xiaoqiu",'16:40 日盘开始关闭系统',9); drawLine(ox, oy, innerYellowR, innerWhiteR, xixian, "#000", 17);
drawLine(ox, oy, innerWhiteR, radius, xixian, "#eee", 17);
drawLine(ox, oy, radius, outerSpaceR1, xixian, "#000", 17, "xiaoqiu","日盘两地三中心数据备份",10); drawLine(ox, oy, innerYellowR, innerWhiteR, xixian, "#000", 18);
drawLine(ox, oy, innerWhiteR, radius, xixian, "#eee", 18);
drawLine(ox, oy, radius, outerSpaceR1, xixian, "#000", 18, "xiaoqiu",'17:00至19:00系统维护',11); drawLine(ox, oy, innerYellowR, innerWhiteR, xixian, "#000", 21);
drawLine(ox, oy, innerWhiteR, radius, xixian, "#eee", 21);
drawLine(ox, oy, radius, outerSpaceR1, xixian, "#000", 21, "xiaoqiu",'21:00夜盘连续交易开始',14); drawLine(ox, oy, innerYellowR, innerWhiteR, xixian, "#000", 23.75);
drawLine(ox, oy, innerWhiteR, radius, xixian, "#eee", 23.75);
drawLine(ox, oy, radius, outerSpaceR1, xixian, "#000", 23.75,"xiaoqiu",'23:35夜盘数据备份',16); //绘制图片
drawPic();
暂无分类();
共有函数的写法
function DrawPie(oxInput, oyInput, radiusInput, drawText) {
///////////////// 绘制扇面
//第一个点
var begAngle = 0 - (Math.PI / 12) * 6.5;
var endAngle = 0 + (Math.PI / 12) * 1.5;
ctx.fillStyle = '#8e97e4';
ctx.beginPath();
ctx.moveTo(oxInput, oyInput);
ctx.arc(oxInput, oyInput, radiusInput, begAngle, endAngle);
ctx.closePath();
ctx.fill();
if (drawText) {
ctx.save();
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
ctx.font = 'bold 11pt Arial'
ctx.fillStyle = '#000';
ctx.translate(oxInput, oyInput);
ctx.fillText("夜盘数据备份", Math.sin(Math.PI * 2 / 24 * 3) * radiusInput*.7+10, Math.cos(Math.PI * 2 / 24 * 3) * radiusInput * (-1)*.7);
ctx.fillText("夜盘闭市", Math.sin(Math.PI * 2 / 24 * 3) * radiusInput * .7 + 10, Math.cos(Math.PI * 2 / 24 * 3) * radiusInput * (-1) * .7+20);
ctx.fillText("系统关闭状态", Math.sin(Math.PI * 2 / 24 * 3) * radiusInput * .7 + 10, Math.cos(Math.PI * 2 / 24 * 3) * radiusInput * (-1) * .7+40);
ctx.restore();
}
//第二个点
begAngle = endAngle
endAngle += (Math.PI / 720) * 85;
ctx.fillStyle = '#8de3e4';
ctx.beginPath();
ctx.moveTo(oxInput, oyInput);
ctx.arc(oxInput, oyInput, radiusInput, begAngle, endAngle);
ctx.closePath();
ctx.fill();
if (drawText) {
ctx.save();
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
ctx.font = 'bold 11pt Arial'
ctx.fillStyle = '#000';
ctx.translate(Math.sin(Math.PI * 2 / 24 * 8.25) * (radiusInput*0.76) + oxInput,
oyInput - Math.cos(Math.PI * 2 / 24 * 8.25) * (radiusInput * 0.76));
ctx.rotate(Math.PI * 2 / 24 * 2.2);
ctx.fillText("日盘系统起动", 0, 0);
ctx.restore();
}
//第三个点
begAngle = endAngle
endAngle += (Math.PI / 720) * 365;
ctx.fillStyle = '#8de398';
ctx.beginPath();
ctx.moveTo(oxInput, oyInput);
ctx.arc(oxInput, oy, radiusInput, begAngle, endAngle);
ctx.closePath();
ctx.fill();
if (drawText) {
ctx.save();
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
ctx.font = 'bold 11pt Arial'
ctx.fillStyle = '#000';
ctx.translate(oxInput, oyInput);
ctx.fillText("日盘连续交易", Math.sin(Math.PI * 2 / 24 * 12) * radiusInput * .7 , Math.cos(Math.PI * 2 / 24 * 12) * radiusInput * (-1) * .7);
ctx.restore();
}
//第四个点
begAngle = endAngle
endAngle += (Math.PI / 720) * 270;
ctx.fillStyle = '#e3e38d';
ctx.beginPath();
ctx.moveTo(oxInput, oyInput);
ctx.arc(oxInput, oyInput, radiusInput, begAngle, endAngle);
ctx.closePath();
ctx.fill();
if (drawText) {
ctx.save();
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
ctx.font = 'bold 11pt Arial'
ctx.fillStyle = '#000';
ctx.translate(oxInput, oyInput);
ctx.fillText("每日结算", Math.sin(Math.PI * 2 / 24 * 17) * radiusInput * .7 + 10, Math.cos(Math.PI * 2 / 24 * 17) * radiusInput * (-1) * .7-40);
ctx.fillText("数据备份", Math.sin(Math.PI * 2 / 24 * 17) * radiusInput * .7 + 10, Math.cos(Math.PI * 2 / 24 * 17) * radiusInput * (-1) * .7-20 );
ctx.fillText("日盘闭市", Math.sin(Math.PI * 2 / 24 * 17) * radiusInput * .7 + 10, Math.cos(Math.PI * 2 / 24 * 17) * radiusInput * (-1) * .7 );
ctx.fillText("系统维护", Math.sin(Math.PI * 2 / 24 * 17) * radiusInput * .7 + 10, Math.cos(Math.PI * 2 / 24 * 17) * radiusInput * (-1) * .7 + 20);
ctx.restore();
}
//第五个点
begAngle = endAngle
endAngle += (Math.PI / 720) * 85;
ctx.fillStyle = '#e2b58c';
ctx.beginPath();
ctx.moveTo(oxInput, oyInput);
ctx.arc(oxInput, oyInput, radiusInput, begAngle, endAngle);
ctx.closePath();
ctx.fill();
if (drawText) {
ctx.save();
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
ctx.font = 'bold 11pt Arial'
ctx.fillStyle = '#000';
ctx.translate(Math.sin(Math.PI * 2 / 24 * 20.25) * (radiusInput * 0.76) + oxInput,
oyInput - Math.cos(Math.PI * 2 / 24 * 20.25) * (radiusInput * 0.76));
ctx.rotate(Math.PI * 2 / 24 * 2.2);
ctx.fillText("夜盘系统起动", 0, 0);
ctx.restore();
}
//第6个点
begAngle = endAngle
endAngle += (Math.PI / 720) * 155;
ctx.fillStyle = '#e38d8e';
ctx.beginPath();
ctx.moveTo(oxInput, oyInput);
ctx.arc(oxInput, oyInput, radiusInput, begAngle, endAngle);
ctx.closePath();
ctx.fill();
if (drawText) {
ctx.save();
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
ctx.font = 'bold 11pt Arial'
ctx.fillStyle = '#000';
ctx.translate(Math.sin(Math.PI * 2 / 24 * 22) * (radiusInput * 0.7) + oxInput,
oyInput - Math.cos(Math.PI * 2 / 24 * 22) * (radiusInput * 0.7));
ctx.rotate(Math.PI * 2 / 24 *4);
ctx.fillText("夜盘连续交易", 0, 0);
ctx.restore();
}
////////////////////////
}
function drawCircular(oxInput, oyInput, radiusInput, fillStyle) {
ctx.beginPath();
ctx.arc(oxInput, oyInput, radiusInput, 0, Math.PI * 2, false);
ctx.fillStyle = fillStyle;
ctx.fill();
}
基于canvas自动化运维工具的更多相关文章
- Ansible自动化运维工具-上
[Ansible特点] 1)Ansible与saltstack均是基于Python语言开发的 2)安装使用简单,基于不同插件和模块实现各种软件,平台,版本的管理以及支持虚拟容器多层级的部署 3)不需要 ...
- 自动化运维工具Ansible详细部署 （转载）
自动化运维工具Ansible详细部署 标签:ansible 原创作品,允许转载,转载时请务必以超链接形式标明文章 原始出处 .作者信息和本声明.否则将追究法律责任.http://sofar.blog. ...
- 自动化运维工具之 Ansible 介绍及安装使用
一.初识Ansible 介绍: Absible 使用 模块(Modules)来定义配置任务.模块可以用标准脚本语言(Python,Bash,Ruby,等等)编写,这是一个很好的做法,使每个模块幂等.A ...
- 自动化运维工具之ansible
自动化运维工具之ansible 一,ansible简介 ansible是新出现的自动化运维工具,基于Python开发,集合了众多运维工具(puppet.cfengine.chef.func.fab ...
- Linux实战教学笔记25:自动化运维工具之ansible (一)
第二十五节 ansible之文件的批量分发 标签(空格分隔): Linux实战教学笔记-陈思齐 ---本教学笔记是本人学习和工作生涯中的摘记整理而成,此为初稿(尚有诸多不完善之处),为原创作品,允许转 ...
- 自动化运维工具——ansible详解（一）
ansible 简介 ansible 是什么? ansible是新出现的自动化运维工具,基于Python开发,集合了众多运维工具(puppet.chef.func.fabric)的优点,实现了批量系统 ...
- 企业级自动化运维工具应用实战-ansible
背景 公司计划在年底做一次大型市场促销活动,全面冲刺下交易额,为明年的上市做准备.公司要求各业务组对年底大促做准备,运维部要求所有业务容量进行三倍的扩容,并搭建出多套环境可以共开发和测试人员做测试,运 ...
- 项目实战10.1—企业级自动化运维工具应用实战-ansible
实战环境: 公司计划在年底做一次大型市场促销活动,全面冲刺下交易额,为明年的上市做准备.公司要求各业务组对年底大促做准备,运维部要求所有业务容量进行三倍的扩容,并搭建出多套环境可以共开发和测试人员做测 ...
- 【实战小项目】python开发自动化运维工具--批量操作主机
有很多开源自动化运维工具都很好用如ansible/salt stack等,完全不用重复造轮子.只不过,很多运维同学学习Python之后,苦于没小项目训练.本篇就演示用Python写一个批量操作主机的工 ...
随机推荐
- postman强大的团队协作功能
今天无意在调项目的接口 ,使用的postman工具 ,自己写的接口信息,只能自己看 ,感觉有点不方便,如果一个公司多名测试,如果一个人写接口信息,大家都能用,就会很节约时间 所以团队协作的功能就诞生了 ...
- Windows+Qt使用gRPC
上篇文章<Windows+VS2017使用gRPC>编译出了Windows下可用的gRPC静态lib库文件,在此基础上要想在Qt上使用,需要使用MSVC2017 64bit构建组件进行构建 ...
- SAP MM Purchase Order History Category
SAP MM Purchase Order History Category 1) ,These are different categories of PO history which is con ...
- git tag介绍
我们常常在代码发版时,使用git 创建一个tag ,这样一个不可修改的历史代码版本就像被我们封存起来一样,不论是运维发布拉取,或者以后的代码版本管理,都是十分方便的. git的tag功能git 下打标 ...
- sqlmap 注入的方法及技巧
sqlmap 注入的方法及技巧 当给 sqlmap 这么一个 url 的时候,它会: 1.判断可注入的参数 2.判断可以用那种 SQL 注入技术来注入 3.识别出哪种数据库 4.根据用户选择,读取哪些 ...
- Django框架（十八）—— drf：序列化组件（serializer）
序列化组件 # 模型层 from django.db import models class Book(models.Model): nid = models.AutoField(primary_ke ...
- 9. [mmc subsystem] host（第三章）——sdhci-pltfm说明
一.sdhci-pltfm说明 sdhci-pltfm并不是实际某个host的driver. sdhci-pltfm是指在sdhci core的基础上,提供了统一对sdhci_host的必要属性进行解 ...
- centos6.5 yum搭建安装linux+apache+mysql+php环境
一.脚本YUM源安装: 1.yum install wget #安装下载工具wget2.wget ...
- 使用类似GeoJson的数据生成物体(建筑等)的功能逻辑
GeoJson作为一种模型传输格式, 用的最多的就是地图里面的各种简单模型了, 比如下图中很贴切的俄罗斯方块楼: 它的格式大概就是下面这样: { "type": "Fea ...
- adb命令之解锁打卡
adb devicesadb shell input keyevent 26 按手机电源键adb shell input swipe 400 1080 40 ...