免费观看又色又爽又黄的小说免费_美女福利视频国产片_亚洲欧美精品_美国一级大黄大色毛片

如何使用HTML5實現(xiàn)會走動的圖形時鐘

本篇內(nèi)容介紹了“如何使用HTML5實現(xiàn)會走動的圖形時鐘”的有關(guān)知識,在實際案例的操作過程中,不少人都會遇到這樣的困境,接下來就讓小編帶領(lǐng)大家學習一下如何處理這些情況吧!希望大家仔細閱讀,能夠?qū)W有所成!

為略陽等地區(qū)用戶提供了全套網(wǎng)頁設(shè)計制作服務,及略陽網(wǎng)站建設(shè)行業(yè)解決方案。主營業(yè)務為做網(wǎng)站、網(wǎng)站設(shè)計、略陽網(wǎng)站設(shè)計,以傳統(tǒng)方式定制建設(shè)網(wǎng)站,并提供域名空間備案等一條龍服務,秉承以專業(yè)、用心的態(tài)度為用戶提供真誠的服務。我們深信只要達到每一位用戶的要求,就會得到認可,從而選擇與我們長期合作。這樣,我們也可以走得更遠!

使用HTML5制作時鐘
如何使用HTML5實現(xiàn)會走動的圖形時鐘

代碼如下:

<!DOCTYPE html>
<html>
<head>
   <title>html5時鐘</title>
</head>
<body>
   <canvas id = "canvas"></canvas></p> <p>    <script>
       var Clock = function (canvas, options) {
           this.canvas = canvas;
           this.ctx = this.canvas.getContext("2d");
           this.options = options;
       };</p> <p>        Clock.prototype = {
           constructor: Clock,
           drawCircle: function () {
               var ctx = this.ctx;
               ctx.strokeStyle = "black";
               ctx.arc(this.canvas.width / 2, this.canvas.height / 2, 50, 0, 2 * Math.PI, false);
               ctx.stroke();
           },
           drawNum: function () {
               var ctx = this.ctx;
               var angle = Math.PI * 2 / 12;
               for (var i = 1; i <= 12; i += 1) {
                   ctx.font = "20px Georgia";
                   ctx.textAlign = "center";
                   ctx.textBaseline = 'middle';
                   ctx.fillText(String(i), this.canvas.width / 2 + Math.cos(3 *Math.PI / 2 + angle * i) * 40, this.canvas.height / 2 + Math.sin(3 * Math.PI / 2 + angle * i) * 40);
               }
           },
           drawPointer: function () {
               var ctx = this.ctx;
               var that = this;
               var date, hour, minute, second;
               date = new Date();
               hour = date.getHours();
               if (hour > 12) {
                   hour = hour % 12;
               }
               minute = date.getMinutes();
               second = date.getSeconds();</p> <p>                var b = minute * Math.PI / 30;
               var c = second * Math.PI / 30;
               var a = hour * Math.PI / 6 + Math.PI / 6 * minute / 60;
               var minuteAngle = Math.PI * 2 / 3600;
               var secondAngle = Math.PI * 2 / 60;
               var hourAngle = Math.PI * 2 / 12 / 3600;</p> <p>                ctx.beginPath();
               ctx.save();
               ctx.translate(that.canvas.width / 2, that.canvas.height / 2);
               ctx.arc(0, 0, 3, 0, 2 * Math.PI, false);
               ctx.fill();
               ctx.closePath();
               ctx.beginPath();
               a += hourAngle;
               ctx.rotate(a);
               ctx.fillRect(-2, -22, 4, 30);
               ctx.closePath();
               ctx.beginPath();
               b += minuteAngle;
               ctx.rotate(b - a);
               ctx.fillRect(-1.5, -26, 3, 35);
               ctx.closePath();
               ctx.beginPath();
               c += secondAngle;
               ctx.rotate(c - b);
               ctx.fillRect(-1, -30, 2, 40);
               ctx.closePath();
               ctx.restore();
           },
           rePaint: function () {
               this.drawPointer();
               this.drawCircle();
               this.drawNum();
           },
           tik: function () {
               var that = this;
               var ctx = this.ctx;
               this.rePaint();
               window.timer = setInterval(function () {
                   ctx.clearRect(0, 0, that.canvas.width, that.canvas.height);
                   that.rePaint();
               }, 1000);
           }
       };</p> <p>        var options;
       var clock = new Clock(document.getElementById("canvas"), options);
       clock.tik();
   </script>
</body>
</html>

保存后使用瀏覽器運行,可以看到走動的圓形時鐘,大家試試看吧

“如何使用HTML5實現(xiàn)會走動的圖形時鐘”的內(nèi)容就介紹到這里了,感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識可以關(guān)注創(chuàng)新互聯(lián)網(wǎng)站,小編將為大家輸出更多高質(zhì)量的實用文章!

本文題目:如何使用HTML5實現(xiàn)會走動的圖形時鐘
URL網(wǎng)址:http://m.newbst.com/article42/ihpsec.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供云服務器移動網(wǎng)站建設(shè)建站公司自適應網(wǎng)站全網(wǎng)營銷推廣網(wǎng)站設(shè)計

廣告

聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)

微信小程序開發(fā)