<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>Analog Clock using Canvas</title>
//以CSS指定字型檔案Abduco.ttf，並且取名為font02
<style>
@font-face {
font-family: 'font02';
src: url('Abduco.ttf');
}
</style>
</head>
<body>
<canvas id="mycanvas" width="500" height="200"></canvas>
</body>
<script>
window.onload = function () {
var canvas = document.getElementById('mycanvas');
var ctx = canvas.getContext('2d');
//以文字顯示時間
//指定字的大小與字型
ctx.font = "18pt font02";
ctx.fillText( date.getFullYear() + '/' +
(date.getMonth()+1) + '/' +
date.getDay() + ' ' +
date.getHours() + '：' +
date.getMinutes() + ' ' +
date.getSeconds(), 10, 40); }
</script>
</html>