Khan Academy Intro to JS: Drawing & Animation

Drawing basics

• 圓形，ellipse(X離右側距離, Y離頂端距離, Weight寬, Height長) ;
• X：0-400, Y：0-400
• line( X離右側距離, Y離頂端距離, start, end);
• rect(X, Y width, radius高度/胖瘦度 );
• line(x1, y1, x2, y2);。1下面，2上面

Coloring

• backroung(RGB code)
• 填滿特定區域：在特定形狀code上方插入fill(RGB code);
• 線條顏色：在線條code上方插入stroke(RGB code);
• 線條粗細：strokeweight(px);
• 去除框線：在所有code上方插入nosttoke();

Variable

• variable：批量改尺寸
  ❶頂端列鍵入var  名稱 = 20;
  ❷找到要修改的函數ellipse(157,151,名稱,名稱)

Animation Basics

• 動畫效果：原理，設定X變數，用相同的X變數+某數寫出其他圖形。所以如果X變數連續增加，就會有動畫效果。
• draw = function() {
  ❶放background，消除毎次移動的滑行殘影
  ❷這裡放所有有X變數在的圖形（要動起來的東西）
  不要放 var x = 某數，var放在draw上方，數値設起點値
  ❸設 x = x+1（速率：一秒移動1px）
  }