---
# System prepended metadata

title: 第二周上課實作

---

---
ｔａｇ：　程式設計上課作品
---
# 第二周上課實作
## 劃一個背景顏色為#ffafcc的標籤



![](https://i.imgur.com/OEH8x5H.png)
```
javascript=

```
 function setup() {//只會執行一次,作環境設定
  // createCanvas(400, 500);//產生一個畫布,畫布寬400高為500
  createCanvas(windowWidth, windowHeight);//產生一個畫布
}

function draw() {//一秒鐘進到此function執行六十次
  // background(200);//背景顏色的設定,括號內只有一個數字,代表是灰階,0是黑色,255是白色
  // background(255,255,0) //括號內只有三個數字(每個數字範圍0到255),rgb
  background("#ffafcc")
}

> javacript=
>  function setup() {//只會執行一次,作環境設定
>   // createCanvas(400, 500);//產生一個畫布,畫布寬400高為500
>   createCanvas(windowWidth, windowHeight);//產生一個畫布
> }
> 
> function draw() {//一秒鐘進到此function執行六十次
>   // background(200);//背景顏色的設定,括號內只有一個數字,代表是灰階,0是黑色,255是白色
>   // background(255,255,0) //括號內只有三個數字(每個數字範圍0到255),rgb
>   background("#ffafcc")
}
```javascript=
 function setup() {//只會執行一次,作環境設定
  // createCanvas(400, 500);//產生一個畫布,畫布寬400高為500
  createCanvas(windowWidth, windowHeight);//產生一個畫布
}

function draw() {//一秒鐘進到此function執行六十次
  // background(200);//背景顏色的設定,括號內只有一個數字,代表是灰階,0是黑色,255是白色
  // background(255,255,0) //括號內只有三個數字(每個數字範圍0到255),rgb
  background("#ffafcc")
}

```

### 畫一個隨著滑鼠移動方框

```
javascript=

function setup() {//只會執行一次,作環境設定
  // createCanvas(400, 500);//產生一個畫布,畫布寬400高為500
  createCanvas(windowWidth, windowHeight);//產生一個畫布
  background(189,224,254)
}

function draw() {//一秒鐘進到此function執行六十次
  // background(200);//背景顏色的設定,括號內只有一個數字,代表是灰階,0是黑色,255是白色
  // background(255,255,0) //括號內只有三個數字(每個數字範圍0到255),rgb
  //  background("#ffafcc")
  background(189,224,254)
    // rect(100,500,200,300)//劃一個方框在(100,500)座標上,寬為(200,300)
    fill("#cdb4db")//針對以下物件充滿顏色
    stroke("#ffc8dd")//設定邊框顏色
    rect(mouseX,mouseY,200)//隨滑鼠移動
    // noSmooth()//沒有邊框

}

``` 
#### 劃一個移動的圓
```
ellipse(mouseX,mouseY,200,400)//劃一個圓
```

##### 畫三個圓
![](https://i.imgur.com/4XyoxMc.gif)

```javascript=
 function setup() {//只會執行一次,作環境設定
  // createCanvas(400, 500);//產生一個畫布,畫布寬400高為500
  createCanvas(windowWidth, windowHeight);//產生一個畫布
  background(189,224,254)
}

function draw() {//一秒鐘進到此function執行六十次
  // background(200);//背景顏色的設定,括號內只有一個數字,代表是灰階,0是黑色,255是白色
  // background(255,255,0) //括號內只有三個數字(每個數字範圍0到255),rgb
  //  background("#ffafcc")
   background(189,224,254)
    // rect(100,500,200,300)//劃一個方框在(100,500)座標上,寬為(200,300)
    fill("#cdb4db")//針對以下物件充滿顏色
    stroke("#ffc8dd")//設定邊框顏色
    // rect(mouseX,mouseY,200)//隨滑鼠移動
    // noSmooth()//沒有邊框
    // ellipse(mouseX,mouseY,200,400)//劃一個圓
    ellipse(mouseX,mouseY,300)
    ellipse(mouseX-150,mouseY-180,150)
    ellipse(mouseX+150,mouseY-180,150)

}

