[RPG] 發糕 canvas animate

在發糕篇～
http://www.realmofprogrammersgamble.website/journal/ch1/jour3.html

概念圖一開始出來的時後，是沒有發糕這個東西的～
就有人說，那顆蛋是不是也要裝飾什麼～
嗯？！一開始有想過在蛋上貼個「滿」「福」之類的...
後來就想到老媽這幾年都自己在做發糕～想說發糕底下用碗裝，跟底座也很像阿XD～
（就有一年陪老媽準備年菜時，偶有被訓過，發糕在蒸的時後，不能偷看，不能亂講話，靜靜等著就好....）

原本的發糕動畫，是 css transform，scale 從小到大～
但被嫌棄說...有 power point 的 fu...Orz...
聽了真是受傷（不過認真的想，這是事實沒錯～囧/）
不過說真的，我又沒看過發糕在發的時後，是長怎麼樣的XD...當年被禁止偷看阿阿阿～
後來就討論說，可能是像土司蛋糕膨起來的樣子吧O_o?...
（雖然後來實作出來像是烤麻糬XD，覺得這樣比較有趣麻^~^...）

這段動畫是用 canvas 畫出來的，真的是有寫到起孝的感覺Orz...
重點大概就是～ 數學真的很重要，canvas 的 ctx.globalCompositeOperation = 'destination-out' 好用，變量計算時，要用相對值（比率）而不是絕對值（螢幕大小問題）....

用 canvas 先畫出原圖，底下是個微倒梯形，上面則是圓形～
一開始用 lineTo/arc 畫範圍，但....有個問題在於算出來的小數點在畫面上被進/去位時，就有一條很蠢的細線.....最後是用 向量繪圖概念的 圖形相加減裁切，總算得到完美的土司形了...
http://www.w3schools.com/tags/canvas_globalcompositeoperation.asp
PS: canvas  基本的 clip 非常難用，可以用向量圖概念處理比較簡單

function cakeCurve(ctx, w, h, p) {
var of = 5;
var h2 = h-h/3;

//cx = w/2, cy = p, the point= 0, h2
var cx = w/2, cy = p;
var r = Math.round( Math.pow(Math.pow(cx, 2) + Math.pow(h2-cy, 2), 0.5) );
//console.log("cx="+cx+", cy="+cy+", r="+r);

ctx.beginPath();

if (p == 0) {
ctx.moveTo(0,h2);
}  else {
//x,y = w/2(cx), y=h2, sin= ??/r
var a1 = r*1.0/w*0.5;
var a2 = w*0.5/r;
ctx.arc(cx,cy, r , a2, a1);
}
ctx.lineTo(w ,h2);
ctx.lineTo(w-of, h);
ctx.lineTo(of, h);
ctx.lineTo(0, h2);
ctx.moveTo(0,h2);
ctx.closePath();
ctx.fill();

//clip left coner...
ctx.globalCompositeOperation = 'destination-out';
ctx.beginPath();
ctx.moveTo(0,h2);
ctx.lineTo(of, h);
ctx.lineTo(0, h);
ctx.closePath();
ctx.fill();

//clip right coner...
ctx.globalCompositeOperation = 'destination-out';
ctx.beginPath();
ctx.moveTo(w,h2);
ctx.lineTo(w-of, h);
ctx.lineTo(w, h);
ctx.closePath();
ctx.fill();
}

接著就是讓他動起來～也沒啥就是 setTimeout 叫他拼命畫 Orz...
概念就是 frame rate (fps)， 反正 60 fps就已經看不出來了～
讓我意外的是，手機在畫沒有lag感...小塊的動畫要用 canvas 來重繪，看起來還是可行的～
（倒是之前蠢蠢的，沒注意到小螢幕變量要用 相對值，而不是絕對值...還以為是手機畫不出來Orz）

  drawCake('ccake', clrs[0], w, h, 0);
  var pms = 70;
  var delay = 0;
  for (var i = 0 ; i < clrs.length ; i ++) {
   var aa = "drawCake('ccake', '"+clrs[i]+"', "+w+", "+h+", "+(220-i*5)+")";
delay += pms;
setTimeout(aa, delay);
  }

function drawCake(cavId, clr, w, h, p, scale)  {
var canvas = document.getElementById(cavId);
    var ctx = canvas.getContext('2d');
canvas.width = w;
canvas.height = h;

if (scale) {
 ctx.scale(scale, scale);
}
var grd = ctx.createLinearGradient(0,0,0,h);
grd.addColorStop(1, clr);
grd.addColorStop(0.5, '#ff9100');
grd.addColorStop(0, '#e65100');

//ctx.fillStyle=clr;
ctx.fillStyle=grd;
cakeCurve(ctx, w, h, p)

//ctx.stroke();
}

不過因位調整變量，顏色等....實在讓我覺得太累了...
數學不好還硬要模擬物理，真是太為難了...
（塗色只用漸層，沒有陰影打光，fu 整個就不太好（跟整體的畫風有不協合感）～突然想到以前當 3D 遊戲剛出來時，那種粗糙生硬的 3D 模組和顏色，就像這種fu...還不如 2D苦工繪圖動畫）
一.一所以以後不會搞這種的，是說也沒有那麼多時間可以研究這塊Orz...