基于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();
        }