-
我也是够无聊的，学canvas画着画着就净想这些有的没得，最后给我整出个网络结构~
-
以下是源代码，用JS封装了一下方法，还不算特别复杂
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>canvas</title>
<style>
#myCanvas {
margin: 0 auto;
border: 1px solid #666;
display: block;
}
</style>
</head>
<body>
<canvas id="myCanvas" width="1000" height="400">您的浏览器不支持 HTML5 canvas 标签。</canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.font = "9px bold 黑体";
// 设置颜色
// 设置水平对齐方式
ctx.textAlign = "center";
// 设置垂直对齐方式
ctx.textBaseline = "middle";
// 封装点
var point = function (x, y) {
var point = {};
point.x = x;
point.y = y;
return point;
}
//直线
function draw_line(point_start, point_end) {
ctx.beginPath();
ctx.moveTo(point_start.x, point_start.y);
ctx.lineTo(point_end.x, point_end.y);
ctx.stroke();
}
//折线
function draw_bline(point1, point2, point3) {
draw_line(point1, point2)
draw_line(point3, point2)
}
//长方形
function draw_rectangle(point1, point2) {
draw_line(point1, point(point1.x, point2.y))
draw_line(point1, point(point2.x, point1.y))
draw_line(point2, point(point2.x, point1.y))
draw_line(point2, point(point1.x, point2.y))
}
//立方体
function draw_cube(rectp1, rectp2, sidepoint) {
draw_rectangle(rectp1, rectp2)
rectp3 = point(rectp2.x, rectp1.y)
sidepoint_l = point(sidepoint.x - (rectp3.x - rectp1.x), sidepoint.y)
sidepoint_r = point(sidepoint.x, sidepoint.y + (rectp2.y - rectp1.y))
draw_line(rectp3, sidepoint)
draw_line(sidepoint_l, sidepoint)
draw_line(sidepoint_l, rectp1)
draw_line(sidepoint_r, sidepoint)
draw_line(sidepoint_r, rectp2)
}
//平躺的正三角
function draw_triangle(start_p, sile_len) {
side2_p = point(start_p.x - sile_len * 2 / 1.7, start_p.y + sile_len / 2)
side3_p = point(start_p.x - sile_len * 2 / 1.7, start_p.y - sile_len / 2)
draw_line(start_p, side2_p)
draw_line(start_p, side3_p)
draw_line(side2_p, side3_p)
}
//箭头
function draw_arraws(start_p, end_p) {
draw_line(start_p, end_p)
draw_triangle(end_p, 5)
}
//resx
function draw_res_x(point1, point2, x) {
ctx.fillText("res" + x, (point1.x + point2.x) / 2, (point1.y + point2.y) / 2);
draw_rectangle(point1, point2)
}
//dbl
function draw_DBL(point1, point2) {
ctx.fillText("DBL", (point1.x + point2.x) / 2, (point1.y + point2.y) / 2);
draw_rectangle(point1, point2)
}
//DBL+上采样
function draw_DBL_caiyang(point1, point2) {
draw_DBL(point1, point2)
tempx = 2 * point2.x - point1.x
point1.x = point2.x
point2.x = tempx
ctx.fillText("上采样", (point1.x + point2.x) / 2, (point1.y + point2.y) / 2);
draw_rectangle(point1, point2)
}
//DBL+conv
function draw_conv_DBL(point1, point2) {
ctx.fillText("conv", (point1.x + point2.x) / 2, (point1.y + point2.y) / 2);
draw_rectangle(point1, point2)
tempx = 2 * point2.x - point1.x
point1.x = point2.x
point2.x = tempx
draw_DBL(point1, point2)
}
//5*dbl
function draw_5DBL(point1, point2) {
ctx.fillText("DBL*5", (point1.x + point2.x) / 2, (point1.y + point2.y) / 2);
ctx.fillText("DBL*5", (point1.x + point2.x) / 2, point2.y+10);
draw_rectangle(point1, point2)
for (i = 0; i < 4; i++) {
point1.x = point1.x - 3
point1.y = point1.y - 3
point2.x = point2.x - 3
point2.y = point2.y - 3
//两边的点
point3 = point(point1.x, point2.y)
point4 = point(point2.x, point1.y)
draw_bline(point3, point1, point4)
}
}
function draw_cube_yx(rectp1, rectp2, sidepoint,size,title) {
draw_cube(rectp1, rectp2, sidepoint)
ctx.fillText(size, (rectp1.x+rectp2.x)/2, rectp2.y+10);
ctx.fillText(title, (rectp1.x+rectp2.x)/2, (rectp1.y+rectp2.y)/2);
}
//平放等边梯形,两短边+一长边的点
function draw_concat(short_point1, short_point2) {
side_len = (short_point2.y-short_point1.y)
point3 = point(short_point1.x-side_len,short_point1.y-side_len/2)
point4 = point(short_point1.x-side_len,short_point2.y+side_len/2)
draw_bline(point3,short_point1,short_point2)
draw_bline(point3,point4,short_point2)
ctx.fillText("concat", (point3.x + short_point1.x) / 2, (point3.y + point4.y) / 2);
}
//第一层YOLO
draw_cube(point(30, 30), point(90, 130), point(95, 25))
// draw_cube(point(30,30),point(60,60),point(75,15))
ctx.fillText("416x416x3", 60, 140);
draw_arraws(point(100, 80), point(135, 80))
draw_DBL(point(140, 60), point(180, 100))
draw_res_x(point(180, 60), point(220, 100), 1)
draw_res_x(point(220, 60), point(260, 100), 2)
draw_res_x(point(260, 60), point(300, 100), 8)
draw_arraws(point(305, 80), point(335, 80))
draw_res_x(point(340, 60), point(380, 100), 8)
draw_arraws(point(385, 80), point(415, 80))
draw_res_x(point(420, 60), point(460, 100), 4)
draw_arraws(point(465, 80), point(485, 80))
draw_5DBL(point(500, 60), point(540, 100))
draw_arraws(point(545, 80), point(775, 80))
draw_conv_DBL(point(780, 60), point(820, 100))
draw_arraws(point(865, 80), point(885, 80))
draw_cube_yx(point(890, 60), point(950, 100),point(965, 45),"13x13x255","Y1")
//中间下行线
draw_bline(point(600, 80), point(600, 140),point(460, 140))
draw_line(point(460, 140),point(460, 180))
draw_arraws(point(460, 180),point(475, 180))
//第二层YOLO
draw_DBL_caiyang(point(480, 160),point(520, 200))
draw_arraws(point(565, 180),point(595, 180))
draw_concat(point(650, 180),point(650, 230))
draw_arraws(point(655, 205),point(675, 205))
draw_5DBL(point(690, 190),point(730, 230))
draw_arraws(point(735, 205),point(775, 205))
draw_conv_DBL(point(780, 190), point(820, 230))
draw_arraws(point(865, 205), point(885, 205))
draw_cube_yx(point(890, 170), point(970, 250),point(985, 155),"26x26x255","Y2")
draw_line(point(400, 80),point(400, 230))
draw_arraws(point(400, 230),point(595, 230))
//第三层
draw_bline(point(755, 205),point(755, 275),point(460, 275))
draw_line(point(460, 275),point(460, 310))
draw_arraws(point(460, 310),point(475, 310))
draw_DBL_caiyang(point(480, 290),point(520, 330))
draw_arraws(point(565, 310),point(595, 310))
draw_concat(point(650, 310),point(650, 360))
draw_arraws(point(655, 335),point(675, 335))
draw_5DBL(point(690, 310),point(730, 350))
draw_arraws(point(735, 335),point(775, 335))
draw_conv_DBL(point(780, 310), point(820, 350))
draw_arraws(point(865, 335), point(885, 335))
draw_cube_yx(point(890, 295), point(930, 375),point(945, 275),"52x52x255","Y3")
draw_line(point(320, 80),point(320, 365))
draw_arraws(point(320, 365),point(595, 365))
ctx.font = "30px bold 黑体";
ctx.fillText("YOLOv3_Structure", 140, 255);
ctx.font = "15px bold 黑体";
ctx.fillText("made by docker", 140, 295);
ctx.font = "9px bold 黑体";
ctx.fillText("[email protected]陈焕", 140, 315);
</script>
</body>
</html>
-
原图在此
-
不过话说回来，这么玩对YOLOv3的结构的理解又加深了一些~~
