Комментарий: В этой статье записывается приложение HTML5 Clock, чтобы попытаться установить перевод и преобразование поворота преобразования координат, а также чертеж пути HTML5 Canvas, BeginPath, ClosePath, Rec, ARC и т. Д., И вы можете прямо загрузить код и ссылаться на него.
В предыдущей статье мы узнали о холсте HTML5. Само собой разумеется, мы можем попробовать написать приложение HTML5 Clock. Здесь мы в основном устанавливаем преобразование трансляции и вращения преобразования координат, а также чертеж пути холста HTML5, начальной дорожки, близкого уровня, Rec, ARC и т. Д., А также важные механизмы спасения и восстановления HTML5 Canvas Drawing HTML5.Я не скажу много, просто загрузите код. Если у вас есть какие -либо вопросы, пожалуйста, задайте вопросы и дайте мне советы.
Рендеринги ниже:
Код:
<html>
<голова>
</head>
<тело>
<canvas> Ваш браузер не поддерживает его </canvas>
<script type = "text/javascript">
var c = document.getElementbyId ("myCanvas");
var cxt = c.getContext ("2d");
var slen = 60;
var mlen = 50;
var hlen = 40;
cxt.strokerect (0, 0, C.width, C.Height);
cxt.beginpath ();
cxt.strokestyle = "#00f";
cxt.fillstyle = "#00f";
cxt.arc (200, 150, 5, 0, 2 * Math.pi, True);
cxt.fill ();
cxt.closepath ();
cxt.beginpath ();
cxt.strokestyle = "#00f";
cxt.arc (200, 150, 100, 0, 2 * Math.pi, True);
cxt.Stroke ();
cxt.closepath ();
cxt.beginpath ();
cxt.translate (200, 150); // посадить происхождение;
cxt.rotate (-math.pi / 2);
cxt.save ();
для (var i = 0; i <60; i ++) {
if (i % 5 == 0) {
// cxt.fillstyle = "#ff0000";
cxt.fillrect (80, 0, 20, 5);
cxt.filltext ("" + (i / 5 == 0? 12: i / 5), 70, 0);
} еще {
// cxt.strokestyle = "#00f";
cxt.fillrect (90, 0, 10, 2);
}
//document.getElementByid("div1").innertext + = "" + i;
cxt.rotate (math.pi / 30);
}
cxt.closepath ();
var ls = 0, lm = 0, lh = 0;
Функция rebresh () {
cxt.restore ();
cxt.save ();
cxt.rotate (ls * math.pi / 30);
cxt.clearrect (5, -1, slen+1, 2+2);
cxt.restore (); cxt.save ();
cxt.rotate (lm * math.pi / 30);
cxt.clearrect (5, -1, mlen+1, 3+2);
cxt.restore (); cxt.save ();
cxt.rotate (lh * math.pi / 6);
cxt.clearrect (5, -3, hlen+1, 4+2);
var time = new Date ();
var s = ls = time.getSeconds ();
var m = lm = time.getminutes ();
var h = lh = time.gethours ();
cxt.restore ();
cxt.save ();
cxt.rotate (s * math.pi / 30);
cxt.fillrect (5, 0, Slen, 2);
cxt.restore (); cxt.save ();
cxt.rotate (m * math.pi / 30);
cxt.fillrect (5, 0, Mlen, 3);
cxt.restore (); cxt.save ();
cxt.rotate (h * math.pi / 6);
cxt.fillrect (5, -2, hlen, 4);
}
var myInterval = setInterval ("refresh ();", 1000);
</script>
<div> </div>
</body>
</html>