---
tage:程式設計上課作品(A班)
---

# 第二周上課實作

## 劃一個背景顏色為#ffc8dd的視窗


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

function draw() { //一秒鐘到次function執行60次
  //background(220); //背景顏色的設定,括號內只有一個數字(0~255),代表是灰階,0是黑色,255是白色
  //background(255.255.0) //括號內只有3個數字(每個數字範圍0~255),RGB
  background("#ffc8dd")
}

---

## 劃一個方框

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

function draw() { //一秒鐘到次function執行60次
  //background(220); //背景顏色的設定,括號內只有一個數字(0~255),代表是灰階,0是黑色,255是白色
  //background(255.255.0) //括號內只有3個數字(每個數字範圍0~255),RGB
  //background("#ffc8dd")
  background(189,224,254)
  //rect( 100,500,200,300) //劃一個方框在(100,500)座標上,
  fill("#c8b6ff") //針對以下的物件充滿c8b6ff顏色
  //noStroke() //沒有邊框
  stroke("#f4978e") //設定邊框的顏色
  rect( mouseX,mouseY,200,200) //隨著滑鼠移動,長寬為200
}

---

## 劃一個移動的圓

ellipse(mouseX,mouseY,200,400) //劃一個圓,隨著滑鼠移動,寬為200高為400

## 畫三個圓

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

function draw() { //一秒鐘到次function執行60次
  //background(220); //背景顏色的設定,括號內只有一個數字(0~255),代表是灰階,0是黑色,255是白色
  //background(255.255.0) //括號內只有3個數字(每個數字範圍0~255),RGB
  //background("#ffc8dd")
  background(189,224,254)
  //rect( 100,500,200,300) //劃一個方框在(100,500)座標上,
  fill("#c8b6ff") //針對以下的物件充滿c8b6ff顏色
  //noStroke() //沒有邊框
  stroke("#f4978e") //設定邊框的顏色
  //rect( mouseX,mouseY,200,200) //隨著滑鼠移動,長寬為200
  //ellipse(mouseX,mouseY,200,400) //劃一個圓,隨著滑鼠移動,寬為200高為400
  ellipse(mouseX,mouseY,300) //大園

  fill("#d8e2dc") //設定以下元件的顏色,設定兩個小圓的顏色
  ellipse(mouseX-150,mouseY-160,150) //左邊小圓
  ellipse(mouseX+150,mouseY-160,150) //右邊小圓
}