--- tags: 111程式設計上課作品(A班) 第三周 ---![](https://i.imgur.com/ef4Q9tL.png) ```javascript= function setup() {//環境設定,只執行一次 createCanvas(windowWidth,windowHeight );//畫布的寬高為整個視窗 background(100)//設定背景,如果是一個數字(0~255),為灰階,0黑,255白 background(255,0,0)//RGB,三個數字(0~255),(255,0,0)紅色 background("#faedcd") } function draw() {//一秒執行60次 //background(220); noFill()//以下畫的元件不要充滿顏色 //frameCount為一個計數器,每次進入draw(),frameCount就會+1 stroke(mouseX%256,mouseY%256,100) ellipse(200,300,100,(40*frameCount)%300)//畫一個座標在(200,100),寬為200,高為40 ellipse(200,300,(40*frameCount)%100,100)//寬度不斷變化 // ellipse(mouseX,mouseY,100,(40*frameCount)%100)//畫一個座標在(200,100),寬為200,高為40 // ellipse(mouseX,mouseY,(40*frameCount)%100,100)//寬度不斷變化 } ![](https://i.imgur.com/xbPYazz.png) ``` ![](https://i.imgur.com/bRDDm80.gif) ```javascript= function setup() { createCanvas(windowWidth,windowHeight ); background("#faedcd") } function draw() { //background(220); nofill() rectMode(CENTER) ;//設定方框以中心點為座標點 ellipse(width/2,height/2,100)//畫圓,座標以圓心為座標點 rect(width/2,height/2,100)//畫方框,座標以左上為座標點 }![](https://i.imgur.com/FT1PXSf.png) ``` ![](https://i.imgur.com/6uMZdBl.png) --- ```javascript= function setup() { createCanvas(windowWidth,windowHeight ); background("#faedcd") } function draw() { //background(220); nofill() rectMode(CENTER) ;//設定方框以中心點為座標點 storkeweight(frameCount%2==0?4:1)//框線粗細,frameCount除以2求於數,當餘數=0(偶數),線條粗細為4,否則為1 ellipse(width/2,height/2,100)//畫圓,座標以圓心為座標點 rect(width/2,height/2,20*frameCount)//畫方框,座標以左上為座標點 }