---
tags: 程式設計上課作品
---

## 第二周上課實作

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

* 產生一個畫布，畫布的寬為整個視窗寬度，高度使用
createCanvas(windowWidth,windowHeight)
* background(255,255,0)//括號內只有3個數字(每一個數字範圍0~255括號內只有3個數字(每一個數字範圍0~255)，RGB

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

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

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

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

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

## 劃一個移動的圓

  ellipse(mouseX,mouseY,200,400)//劃一個圓，寬為200高為400

### 畫第三個圓

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

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

  fill("#cdb4db")//設定以下
  ellipse(mouseX-150,mouseY-180,150)//左邊小圓
  ellipse(mouseX+150,mouseY-180,150)//右邊小圓
}