1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
|
"use strict"
const canvas_bg = document.getElementById("canvas_bg");
const ctx = canvas_bg.getContext("2d");
const ORANGE_COLOR = "#fe8b00ff";
const WHITE_COLOR = "#ffffffff";
const CELL_WIDTH = 256;
const WALLPAPER_FONT = "30px Arial";
const WALLPAPER_COL = 30;
const WALLPAPER_ROW = 50;
const UNDERLINE_COL_START = 25;
const UNDERLINE_COL_END = CELL_WIDTH - UNDERLINE_COL_START;
const UNDERLINE_ROW = 60;
const SIZE_TEXT_FONT = "36px Arial";
const SIZE_TEXT_COL = 25;
const SIZE_TEXT_ROW = 96;
function drawCanvasBg() {
ctx.clearRect(0, 0, canvas_bg.width, canvas_bg.height);
ctx.fillStyle = ORANGE_COLOR;
ctx.fillRect(0, 0, canvas_bg.width, canvas_bg.height);
var largerSize = Math.max(canvas_bg.width, canvas_bg.height);
var width = Math.max(3, Math.ceil(largerSize / 1000) + 1);
ctx.fillStyle = WHITE_COLOR;
ctx.fillRect(0, 0, width, canvas_bg.height);
ctx.fillRect(0, 0, canvas_bg.width, width);
ctx.fillRect(canvas_bg.width - width, 0, canvas_bg.width, canvas_bg.height);
ctx.fillRect(0, canvas_bg.height - width, canvas_bg.width, canvas_bg.height);
var lineWidth = 1;
var lineOffset = 0.5;
if (largerSize > 5000) {
lineWidth = 2;
lineOffset = 0;
}
ctx.strokeStyle = WHITE_COLOR;
ctx.lineWidth = lineWidth;
var currentColPos = CELL_WIDTH + lineOffset;
while (currentColPos < canvas_bg.width) {
ctx.moveTo(currentColPos, 0);
ctx.lineTo(currentColPos, canvas_bg.height);
ctx.stroke();
currentColPos += CELL_WIDTH;
}
var currentRowPos = CELL_WIDTH + lineOffset;
while (currentRowPos < canvas_bg.height) {
ctx.moveTo(0, currentRowPos);
ctx.lineTo(canvas_bg.width, currentRowPos);
ctx.stroke();
currentRowPos += CELL_WIDTH;
}
ctx.font = WALLPAPER_FONT;
ctx.fillText("WALLPAPER", WALLPAPER_COL, WALLPAPER_ROW);
ctx.moveTo(UNDERLINE_COL_START + lineOffset, UNDERLINE_ROW);
ctx.lineTo(UNDERLINE_COL_END + lineOffset, UNDERLINE_ROW);
ctx.stroke();
ctx.font = SIZE_TEXT_FONT;
ctx.fillText(canvas_bg.width + "x" + canvas_bg.height, SIZE_TEXT_COL, SIZE_TEXT_ROW);
}
function onResize() {
canvas_bg.width = window.innerWidth;
canvas_bg.height = window.innerHeight;
drawCanvasBg();
}
onResize();
window.addEventListener("resize", onResize);
|
