基于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写一个批量操作主机的工 ...

随机推荐

HashHelper
在C#中,数据的Hash以MD5或SHA-1的方式实现,MD5与SHA1都是Hash算法,MD5输出是128位的,SHA1输出是160位的,MD5比SHA1快,SHA1比MD5强度高. MD5与SHA ...
.Net网站防盗链
一.简单写法,在Global.asax下的这个方法中添加如下信息 /// <summary> /// 管道当中的第一个事件 /// </summary> /// <par ...
ThreadPoolTaskExecutor学习
1. ThreadPoolTaskExecutor学习 1.1. 前言我们知道一般创建线程池,我们都用ThreadPoolExecutor,但实际上Spring它也对该线程池做了一层封装,他就是Th ...
python类模拟电路实现
实现电路: 实现方法: class LogicGate(object): def __init__(self, n): self.name = n self.output = None def get ...
iconfont采坑
1. iconfont采坑 1.1. 前言使用iconfont过程中踩过坑特此记录不知道iconfont的这里也简单介绍一笔,阿里开放的一个图标素材库,用来快速找图标下载使用图标 iconfont ...
统计代码测试覆盖率-Python
衡量Unit Test(单元测试)是否充分, 覆盖率是一个必要指标, 是检验单元测试的重要依据, 这里针对python unittest 的单元测试覆盖率coverage进行分享. 来自官方的解释: ...
13.生产环境中的 redis 是怎么部署的？
作者:中华石杉面试题生产环境中的 redis 是怎么部署的? 面试官心理分析看看你了解不了解你们公司的 redis 生产集群的部署架构,如果你不了解,那么确实你就很失职了,你的 redis 是主 ...
常用的linux命令大全
之前做过两年的运维,用过很多命令,深切体会到某些linux命令熟练掌握后对效率提升有多大.举个简单的例子,在做了研发后经常会有跑一些数据,对于结果数据的处理,我们的产品同学一般都习惯于用excel做统 ...
mysql性能优化随笔
mysql性能优化是一个很大的命题,这里只记录一下近期的一些小经验. 曾经以为看了点create table时加index的语法就觉得自己知道怎么做mysql优化了,后来又看了点介绍mysql索引底层 ...
并发、并行、同步、异步、全局解释锁GIL、同步锁Lock、死锁、递归锁、同步对象/条件、信号量、队列、生产者消费者、多进程模块、进程的调用、Process类、
并发:是指系统具有处理多个任务/动作的能力. 并行:是指系统具有同时处理多个任务/动作的能力. 并行是并发的子集. 同步:当进程执行到一个IO(等待外部数据)的时候. 异步:当进程执行到一个IO不等到 ...

基于canvas自动化运维工具

基于canvas自动化运维工具的更多相关文章

随机推荐

热门专题