摘要: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