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)
}