---
# System prepended metadata

title: Software Studio 2023 Spring

---

# Software Studio 2023 Spring
## Assignment 01 Web Canvas


### Scoring

| **Basic components**                             | **Score** | **Check** |
| :----------------------------------------------- | :-------: | :-------: |
| Basic control tools                              | 30%       | Y         |
| Text input                                       | 10%       | Y         |
| Cursor icon                                      | 10%       | Y         |
| Refresh button                                   | 5%       | Y         |

| **Advanced tools**                               | **Score** | **Check** |
| :----------------------------------------------- | :-------: | :-------: |
| Different brush shapes                           | 15%       | Y         |
| Un/Re-do button                                  | 10%       | Y         |
| Image tool                                       | 5%        | Y         |
| Download                                         | 5%        | Y         |

| **Other useful widgets**                         | **Score** | **Check** |
| :----------------------------------------------- | :-------: | :-------: |
| Name of widgets                                  | 1~5%     | Y       |


---

### How to use 
**1.筆刷、橡皮擦、Reset**
*   點擊鉛筆圖案的按鈕可以進入畫筆模式，透過按住移動滑鼠來繪製線條。
*   點擊橡皮擦按鈕就會進入清除模式，按住滑鼠移動可以將滑鼠周遭清除。
![](https://i.imgur.com/GghZRbK.png)

*   移動拉桿可以改變筆或是橡皮擦的大小，範圍是1px~50px。
![](https://i.imgur.com/AVa2vk3.png)
*   點擊Reset按鈕會將整個畫布的內容清除。
![](https://i.imgur.com/Kg2oxGT.png)


**2.文字**

*  點擊該按鈕會進入文字模式，在畫布上任意一處點擊會產生一個文字方塊，輸入完後按Enter鍵，文字就會被繪製在畫布上的點擊處。
![](https://i.imgur.com/sGg2WRZ.png)
*  字形跟字體都可以藉由下拉式選單來更改。
![](https://i.imgur.com/sqJgmTD.png)

**3.下載跟上傳**

*  點擊下載按鈕會將畫布的內容儲存成jpeg檔並下載至本地端。
*  點擊上傳按鈕可以從本地端搜尋圖片上傳，選擇好後可以在畫布上自由拉取圖片的大小。
![](https://i.imgur.com/2HSWVqt.png)
(上傳範例)
![](https://i.imgur.com/GPsTs1s.jpg)

**4.undo和redo**
*  按undo按鈕(左)可以將畫布回復到上一個動作，若已經回到最原始的狀態則保持原樣。
*  按redo按鈕(右)可以將undo後的畫布回復到下一步，但若目前的畫布不是最新的，在畫布上做更動會消除原本畫布之後的紀錄。

**5.三種圖形**
*  按下長方形、圓形、三角形的按鈕可以分別畫出相對應的圖形。
![](https://i.imgur.com/CNxAtan.png)

**6.調色盤**
*  在左邊的正方形區域，按住滑鼠移動可改變同一色塊的顏色，右邊的長方形則是可以調整色塊。
![](https://i.imgur.com/pEPQGql.png)

### Bonus Function description
**1. 選取**
*  按下該按鈕後可以在畫布上選取範圍，並拖曳到畫面的其他地方。
![](https://i.imgur.com/eXWQ3tR.png)

**2. 複製與貼上**
*  按下複製按鈕(左)後，可以在畫面上選取範圍複製，按下貼上按鈕(右)可以在滑鼠點擊的地方貼上複製的內容，若想要重複貼上只要在按一次貼上按鈕就好，再按下複製按鈕會更新貼上的內容。
![](https://i.imgur.com/LsloVMW.png)

  
**3. 實心空心切換**
*  當卡比按鈕呈現黑白時，代表現在畫的三種圖形是空心的，按下卡比按鈕後會變成彩色，代表可以畫出實心圖形，可自由在兩種風格切換。
![](https://i.imgur.com/OJFvlfF.png) ![](https://i.imgur.com/7PgyEml.png)

**4. 滴管**
*  點擊滴管按鈕，在畫布的範圍內，畫筆的顏色會變成現在滑鼠所紙的顏色，在按一下滑鼠就可以確定更改。
![](https://i.imgur.com/X2YfxPo.png)





### Web page link

https://mycanvas--coco.firebaseapp.com/

### Others (Optional)

可以多注意右下角的卡比會有什麼變化喔~

<style>
table th{
    width: 100%;
}
</style>
