diff --git a/.gitignore b/.gitignore
index c38fa4e..6d484c5 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,2 +1,3 @@
.idea
*.iml
+.DS_Store
diff --git a/Colors/index.html b/Colors/index.html
new file mode 100644
index 0000000..12f23cd
--- /dev/null
+++ b/Colors/index.html
@@ -0,0 +1,10 @@
+
+
+
+
+ Title
+
+
+
+
+
\ No newline at end of file
diff --git a/LoadPhoto/app.js b/LoadPhoto/app.js
new file mode 100644
index 0000000..463d543
--- /dev/null
+++ b/LoadPhoto/app.js
@@ -0,0 +1,9 @@
+(function () {
+
+ let img = new Image();
+ img.onload = e => {
+ document.body.appendChild(img);
+ };
+ img.src = "dog.jpg";
+
+})();
\ No newline at end of file
diff --git a/LoadPhoto/dog.jpg b/LoadPhoto/dog.jpg
new file mode 100644
index 0000000..4e6e1f1
Binary files /dev/null and b/LoadPhoto/dog.jpg differ
diff --git a/LoadPhoto/index.html b/LoadPhoto/index.html
new file mode 100644
index 0000000..658c18d
--- /dev/null
+++ b/LoadPhoto/index.html
@@ -0,0 +1,12 @@
+
+
+
+
+ Title
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/PhotoData/app.js b/PhotoData/app.js
new file mode 100644
index 0000000..d65338b
--- /dev/null
+++ b/PhotoData/app.js
@@ -0,0 +1,46 @@
+(function () {
+
+ let canvas = document.querySelector("canvas");
+
+ function loadImage(src) {
+ return new Promise((resolve, reject) => {
+ let img = new Image();
+ img.onload = () => {
+ resolve(img);
+ };
+ img.onerror = reject;
+ img.src = src;
+ });
+ }
+
+ async function main() {
+ let img = await loadImage("dog.jpg");
+
+ //draw image
+ /**
+ * @type {CanvasRenderingContext2D | null}
+ */
+ let context2d = canvas.getContext("2d");
+ context2d.drawImage(img, 0, 0);
+
+ let imageData = context2d.getImageData(0, 0, 200, 200);
+ // console.log(imageData.data.length);
+ console.log(imageData.data);
+
+ let rImageData = context2d.createImageData(200, 200);
+ for (let i = 0; i < imageData.data.length; i += 4) {
+ let r = imageData.data[i];
+ let g = imageData.data[i + 1];
+ let b = imageData.data[i + 2];
+ let value = Math.round((r + g + b) / 3);
+ rImageData.data[i] = value;
+ rImageData.data[i + 1] = value;
+ rImageData.data[i + 2] = value;
+ rImageData.data[i + 3] = 255;
+ }
+
+ context2d.putImageData(rImageData, 200, 0);
+ }
+
+ main();
+})();
\ No newline at end of file
diff --git a/PhotoData/dog.jpg b/PhotoData/dog.jpg
new file mode 100644
index 0000000..4e6e1f1
Binary files /dev/null and b/PhotoData/dog.jpg differ
diff --git a/PhotoData/index.html b/PhotoData/index.html
new file mode 100644
index 0000000..4451632
--- /dev/null
+++ b/PhotoData/index.html
@@ -0,0 +1,14 @@
+
+
+
+
+ Title
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git "a/\346\234\272\345\231\250\345\255\246\344\271\240\344\271\213\346\211\213\345\206\231\350\257\206\345\210\253.pptx" "b/\346\234\272\345\231\250\345\255\246\344\271\240\344\271\213\346\211\213\345\206\231\350\257\206\345\210\253.pptx"
index e6c7091..bb49310 100644
Binary files "a/\346\234\272\345\231\250\345\255\246\344\271\240\344\271\213\346\211\213\345\206\231\350\257\206\345\210\253.pptx" and "b/\346\234\272\345\231\250\345\255\246\344\271\240\344\271\213\346\211\213\345\206\231\350\257\206\345\210\253.pptx" differ
diff --git "a/\350\265\204\346\272\220/dog.jpg" "b/\350\265\204\346\272\220/dog.jpg"
new file mode 100644
index 0000000..4e6e1f1
Binary files /dev/null and "b/\350\265\204\346\272\220/dog.jpg" differ