1 var canvas = document.getElementById('canvas'), ctx = canvas.getContext('2d');
2 var start = 1, end = 256, step = 30, direction = 'right';
3 var len = end - start + 1, wLen = 1, hLen = 1, flag = 1;
4 var sideLength = Math.ceil(Math.sqrt(len)); // 总数求边长
5 var currentX = step*(sideLength-1)/2, currentY = step*(sideLength+2)/2;
6
7 ctx.moveTo(currentX, currentY);
8 ctx.font = "14px sans-serif";
9 // ctx.fillRect(0,0, canvas.width, canvas.height)
10 ctx.fillStyle = "#000";
11 console.log(sideLength);
12 while (len--) {
13 currentX += getXY(direction).x;
14 currentY += getXY(direction).y;
15
16 ctx.fillText(start++, currentX, currentY);
17
18 ctx.moveTo(currentX, currentY);
19
20 if (direction == 'up' && flag > hLen) {
21 hLen++;
22 direction = 'right';
23 flag = 1;
24 } else if (direction == 'right' && flag > wLen) {
25 wLen++;
26 direction = 'down';
27 flag = 1;
28 } else if (direction == 'down' && flag > hLen) {
29 hLen++;
30 direction = 'left';
31 flag = 1;
32 } else if (direction == 'left' && flag > wLen) {
33 wLen++;
34 direction = 'up';
35 flag = 1;
36 }
37
38 flag ++;
39 }
40
41 function getXY(dir) {
42 var x = 0, y = 0;
43 switch(dir) {
44 case 'up':
45 x = 0;
46 y -= step;
47 break;
48 case 'right':
49 x += step;
50 y = 0;
51 break;
52 case 'down':
53 x = 0;
54 y += step;
55 break;
56 case 'left':
57 x -= step;
58 y = 0;
59 break;
60 }
61 return {x: x, y: y}
62 }
63
