首先我们的工具绝对顶尖，绝对绚丽。如果有需要代码，可以加我微信索取。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(); }