lch24.github.io/coloregg.js at main · lch24/lch24.github.io · GitHub

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
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
import control from "./control.js";
const cegg = document.createElement("canvas");
cegg.width = 1600;
cegg.height = 900;
cegg.id = "coloregg";
document.body.append(cegg);
export const ctx = cegg.getContext("2d");
const test = document.createElement("canvas");
test.width = 1600;
test.height = 900;
test.id = "test";
document.body.append(test);
export const ctx2 = test.getContext("2d");
const Cegg = {
  position: [1, 1],
  num: 0,
  draw() {
    let lst = control.convert(this.position[0], this.position[1]);
    ctx.beginPath();
    ctx.ellipse(lst[0] + 52, lst[1] + 12, 18, 10, 0, 0, 2 * Math.PI);
    let clr = ctx.createLinearGradient(
      lst[0] + 52,
      lst[1],
      lst[0] + 52,
      lst[1] + 32
    );
    clr.addColorStop(0.1, "red");
    clr.addColorStop(0.2, "orange");
    clr.addColorStop(0.3, "yellow");
    clr.addColorStop(0.5, "green");
    clr.addColorStop(0.7, "blue");
    ctx.fillStyle = clr;
    ctx.fill();
    ctx.beginPath();
    ctx.ellipse(lst[0] + 52, lst[1] + 15, 18, 10, 0, 0.45, Math.PI - 0.45);
    ctx.lineCap = "round";
    ctx.strokeStyle = "purple";
    ctx.lineWidth = 6;
    ctx.stroke();
    ctx.beginPath();
    ctx.lineWidth = 2;
    ctx.moveTo(lst[0] + 33.5, lst[1] + 13);
    ctx.lineTo(lst[0] + 33.5, lst[1] + 18);
    ctx.stroke();
    ctx.beginPath();
    ctx.moveTo(lst[0] + 70.5, lst[1] + 13);
    ctx.lineTo(lst[0] + 70.5, lst[1] + 18);
    ctx.stroke();
  },
  async pop() {
    switch (this.num) {
      case 1:
        {
          var img = new Image();
          img.src = "30.jpg";
          await new Promise((resolve) => {
            img.onload = resolve;
          });
          ctx2.drawImage(img, 0, 0, 3000, 2131, 275, 50, 1050, 700);
          let ans = document.createElement("input");
          let p = document.createElement("p");
          ans.className = "answer";
          p.className = "p";
          document.body.append(ans);
          document.body.append(p);
          p.innerHTML = "请输入该电路图的名称";
          ans.addEventListener("input", function () {
            if (this.value == "741运放") {
              Cegg.clear2();
              ans.remove();
              p.remove();
              control.process = 4;
            }
          });
        }
        break;
      case 2:
        {
          var img = new Image();
          img.src = "31.png";
          await new Promise((resolve) => {
            img.onload = resolve;
          });
          ctx2.drawImage(img, 0, 0, 491, 345, 275, 50, 1050, 700);
          let ans = document.createElement("input");
          let p = document.createElement("p");
          ans.className = "answer";
          p.className = "p";
          document.body.append(ans);
          document.body.append(p);
          p.innerHTML = "请输入保留4位有效数字的结果";
          ans.addEventListener("input", function () {
            if (this.value == "0.2722") {
              Cegg.clear2();
              ans.remove();
              p.remove();
              control.process = 4;
            }
          });
        }
        break;
      case 3:
        {
          var img = new Image();
          img.src = "32.png";
          await new Promise((resolve) => {
            img.onload = resolve;
          });
          ctx2.drawImage(img, 0, 0, 1675, 901, 275, 50, 1050, 700);
          let ans = document.createElement("input");
          let p = document.createElement("p");
          ans.className = "answer";
          p.className = "p";
          document.body.append(ans);
          document.body.append(p);
          p.innerHTML = "请输入图中电路的功能";
          ans.addEventListener("input", function () {
            if (this.value == "乘法") {
              Cegg.clear2();
              ans.remove();
              p.remove();
              control.process = 4;
            }
          });
        }
        break;
    }
  },
  clear() {
    ctx.clearRect(0, 0, 1600, 900);
  },
  clear2() {
    ctx2.clearRect(0, 0, 1600, 900);
  },
};
export default Cegg;