[HTML5]利用canvas裁剪圖片成不規則形狀

這是「繚乱三国演義」中物語進行時的動畫。依照不同的故事情節,會出現不同的武將來陪伴玩家進行物語。
為了減少設計部門輸出的時間,在加上它並不是規則的正方形,在ios版本時我採用的是css的「-webkit-mask-box-image」方式把它遮成六角形的樣子。

但是在即將上線的android版本中,css的遮照會因為套用css動畫而失效。所以就必須考慮其他的方式。本來我是想在動畫結束後再重新套用一次css遮罩或是直接就用setinterval不斷的套用。可惜騙不過所有的android瀏覽器。最後只好想辦法用canvas來重新繪圖。
繼續閱讀

[html5] 用canvas作動畫

為了即將要弄的iphone遊戲,實在是不得不要來理解一下html5…
雖然開頭總是一頭霧水,總之還是先把它一部分一部分的拆開來慢慢了解,為了遊戲的需求,canvas理所當然就是我的第一個目標囉~

canvas如他字面意思就是一張畫布,所以想要讓他變成像是flash一樣的動畫就得先為他加上時間軸,我是把它想像成小時候我們有時會畫在書角的小人一樣,當快速翻動時,人,就可以動起來了!
以下是實現時間軸的code:

function init(){
	canvas = document.getElementById("canvas");
	canvas.width  = WIDTH;
	canvas.height = HEIGHT;
	canvas.addEventListener("click",ctxOnClick,false);
	ctx = canvas.getContext('2d');
	//時間軸
	setInterval(drawCanvas, 1000/FPS);
}
 
function drawCanvas(){
	//sceneTime --;
	// console.log(sceneTime);
	for(i=0;i<objarr .length;i++){
		objarr[i].update();
	}
 
	//把canvas清空
	ctx.clearRect(0, 0, WIDTH, HEIGHT);
	for(i=0;i<objarr.length;i++){
		objarr[i].draw();
	}
}

也就是說,每執行一次drawCanvas,就要把canvas清空一次,然後再從「更新過」的objarr陣列中,一一把東西再畫出來。
繼續閱讀