HTML5 - Pratice Canvas - Cards

摘要:HTML5 - Pratice Canvas - Cards

這是我練習HTML Canvas ,

想製作一個樸克牌推開成扇形的效果及,動態產生Canvas 的方式,另外自己手動寫一個物件 CanvasHelper,來幫我完成繪製及動態產生canvas的方式。

使用JQuery來取得物件或製造物件。

CanvasHelper.html


<html>
    <head>
		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
        <script src="CanvasHelper.js"></script>		
		<script>
		var canvas = null;
		var message = 'cards';
		var width = 620;
		var height = 300;
		
		$( document ).ready(function() {
			canvas = new CanvasHelper(width,height);
			canvas.setMessage(message);
			canvas.displayGridLine(true);
			canvas.render();
			$('#divPanel').append(canvas.getCanvas());	
		});	
		
		</script>
    </head>
    <body>
	    <div id="divPanel">
		    
		</div>		
    </body>
</html>

 

CanvasHelper.js

因編輯有問題,

所以js檔上傳到dropbox處理

 

https://dl.dropboxusercontent.com/u/41917458/CanvasHelper.js

Demo連結

https://dl.dropboxusercontent.com/u/41917458/CanvasHelper.html