<html xmlns="http://www.w3.org/1999/xhtml">
<title>Image Maker</title>
<script type='text/javascript'
src='http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.9.1.js'></script>
body { background-color: #cccccc; }
.animation { position: absolute; top: 12px; left: 12px; display: none; }
//利用canvas為圖檔加上跑馬燈文字製作成動畫格(Frame)圖檔
function createFrameImage(idx, text, imgPath, opt) {
fontStyle: "bold", //normal, bold, italic
fontSize: 14, //以Pixel為單位
var options = $.extend(defaultOptions, opt);
var canvas = document.createElement("canvas"),
context = canvas.getContext("2d");
var font = options.fontStyle + " " + options.fontSize + "px " +
var metrics = context.measureText(text);
//Deferred物件, 用來同步圖檔製作完成時間,實現循序執行效果
var $img = $("<img />"); $img.appendTo("body");
//圖片載入後才能由.with()/.height()取寬高,故等待load後再執行
$img.one("load", function () {
var w = Math.max(metrics.width, $img.width());
var h = $img.height() + options.padding + options.fontSize;
canvas.width = w; canvas.height = h;
context.drawImage($img[0], (w - $img.width()) / 2, 0);
context.textAlign = "left";
context.fillStyle = options.fgColor;
context.fillText(text, 0,
$img.height() + options.fontSize / 2 + options.padding);
$("<img />", { src: canvas.toDataURL(), "class": "frame" })
var origWord = "darkthread";
var p = origWord.split(""); //拆成字串陣列
var words = [], prefix = "";
//第一張先放入長度與origWord相同的空白字元字串
words.push(new Array(origWord.length).join(" "));
for (var i = 0; i < p.length; i++) {
prefix = origWord.substr(0, i);
var runLen = p.length - i;
for (var j = runLen - 1; j >= 0; j--) {
var runStr = $.map(new Array(runLen), function (v, k) {
return k == j ? p[i] : " ";
words.push(prefix + runStr);
//利用jQuery.Deferred()循序產生跑馬燈動畫圖檔
var chain = $.Deferred().resolve();
$.each(words, function (idx, word) {
var imgPath = "GPA" + ((idx % 8) + 1) + ".png";
chain = chain.then(function () {
return createFrameImage(idx, word, imgPath, {});
//用快速切換各Frame圖檔顯示模擬翻書動畫效果
var $frames = $(".frame");
//透過css將所有Frame移至同一絕對座標並先隱藏
$frames.addClass("animation");
var idx = 0, lastIdx = -1;
setInterval(function () {
if (lastIdx > -1) $frames.eq(lastIdx).hide();
idx = (idx + 1) % words.length;