التعليق: يكتب هذا المقال تطبيق HTML5 على مدار الساعة لمحاولة ضبط تحول الترجمة والدوران لتحويل الإحداثيات ، وكذلك رسم المسار لقماش HTML5 ، BeginPath ، Closepath ، REC ، ARC ، وما إلى ذلك ، ويمكنك تحميل الرمز مباشرة وإشارة إليه.
في المقالة السابقة ، تعلمنا عن قماش HTML5. وغني عن القول ، يمكننا محاولة كتابة تطبيق HTML5 على مدار الساعة. هنا قمنا هنا بتعيين تحول الترجمة والدوران لتحويل الإحداثيات ، وكذلك رسم المسار لقماش HTML5 ، BeginPath ، Closepath ، REC ، ARC ، وما إلى ذلك ، وآليات إنقاذ حالة الرسم المهمة والاسترداد لرسم مسار القماش HTML5 ، حفظ ، استعادة.لن أقول الكثير ، فقط قم بتحميل الرمز. إذا كان لديك أي أسئلة ، فيرجى طرح الأسئلة وإعطائي النصيحة.
الاداءات أدناه:
شفرة:
<html>
<head>
</head>
<body>
<Canvas> لا يدعمه متصفحك </canvas>
<script type = "text/javaScript">
var c = document.getElementById ("mycanvas") ؛
var cxt = c.getContext ("2d") ؛
فار سلين = 60 ؛
var mlen = 50 ؛
var hlen = 40 ؛
cxt.StrokEct (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 ++) {
إذا (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 ؛
وظيفة Refresh () {
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>
<viv> </viv>
</body>
</html>