2. 程式人生 > >h5之canvas畫時鐘

h5之canvas畫時鐘

阿新 • • 發佈：2019-01-21
function clock () { var cvs = document.getElementById('cvs'); var ctx = cvs.getContext('2d'); // 清除畫布內容 ctx.clearRect(0,0,800,600); // 獲取時間 var dates = new Date(); var h = dates.getHours(); var min = dates.getMinutes(); var
sec = dates.getSeconds(); var times = h + '：' + min; h += min/60; min += sec/60; //設定錶盤，漸變方法的引數1,2雨4,5分別為兩個圓的圓心，引數3,6分別為兩個圓的半徑 var g1 = ctx.createRadialGradient(400, 300, 0, 400, 300, 150); //設定兩個漸變色的引數 g1.addColorStop(0, "#fcfcfc"); g1.addColorStop(1
, "#808080"); // 畫表盤和表心兩圓 ctx.beginPath(); ctx.lineWidth = 8; ctx.arc(400,300,150,0,2*Math.PI,true); ctx.strokeStyle = 'black'; ctx.stroke(); ctx.closePath(); ctx.fillStyle = g1; ctx.fill(); ctx.beginPath(); ctx.lineWidth = 1
; ctx.arc(400,300,10,0,2*Math.PI,true); ctx.closePath(); ctx.fillStyle = 'yellow'; ctx.fill(); // 錶盤分鐘刻度線 for (var i=0; i<60; i++) { ctx.save(); // 儲存狀態 ctx.translate(400, 300); ctx.rotate(Math.PI/30 * i); ctx.beginPath(); ctx.fillStyle = 'red'; ctx.fillRect(0, -150, 2, 10); ctx.closePath(); ctx.restore(); // 恢復原始狀態 } // 錶盤時鐘刻度線 for (var i = 0; i<12; i++) { ctx.save(); ctx.translate(400, 300); ctx.rotate(Math.PI/6 * i); ctx.beginPath(); ctx.fillStyle = 'black'; ctx.fillRect(0, -150, 2, 15); ctx.closePath(); ctx.restore(); } // 錶盤時針 ctx.save(); ctx.translate(400, 300); ctx.rotate(Math.PI/6 * h); ctx.beginPath(); ctx.moveTo(0, -100); ctx.lineTo(-8, -20); ctx.lineTo(0, 0); ctx.lineTo(8, -20); ctx.lineTo(0, -100); ctx.closePath(); ctx.fillStyle = '#000'; ctx.fill(); ctx.restore(); // 錶盤分針 ctx.save(); ctx.translate(400, 300); ctx.rotate(Math.PI/30 * min); ctx.beginPath(); ctx.moveTo(0, -120); ctx.lineTo(-8, -20); ctx.lineTo(0, 0); ctx.lineTo(8, -20); ctx.lineTo(0, -120); ctx.closePath(); ctx.fillStyle = 'blue'; ctx.fill(); ctx.restore(); // 錶盤秒針 ctx.save(); ctx.translate(400, 300); ctx.rotate(Math.PI/30 * sec); ctx.beginPath(); ctx.moveTo(0, -150); ctx.lineTo(-8, -20); ctx.lineTo(0, 0); ctx.lineTo(8, -20); ctx.lineTo(0, -150); ctx.closePath(); ctx.fillStyle = 'yellow'; ctx.fill(); ctx.restore(); // 數字時間 ctx.save(); ctx.fillStyle = '#000'; ctx.font = 'bold 20px 微軟雅黑'; ctx.translate(400, 300); ctx.beginPath(); ctx.fillText(times, -38, 50, 200); ctx.closePath(); ctx.fill(); ctx.restore(); } clock(); setInterval(clock, 1000); // 每秒鐘重新整理一次

相關推薦

h5之canvas畫時鐘

function clock () { var cvs = document.getElementById('cvs'); var ctx = cvs.getContext('2d'); // 清除畫布內容

Canvas 畫時鐘

前言 不管學習什麼，不動手去做，永遠不能熟練掌握。學習了 canvas API，會覺得只要按照直線、圓等畫法去畫，canvas 太簡單了。可是，當你真正去畫的時候，會遇到許多的問題。 下面介紹的是 canvas 時鐘，主要是與大家分享我的學習過程。

一個在h5的canvas元素中畫撲克牌jquery插件實現

code isp arguments close tca func spa font blog 1 //非架構 2 ; (function ($) { 3 var aspect = 5.7 / 8.8;//撲克寬和高比例 4 function Paint

原生js之canvas時鐘組件

raw document tel align -a 映射 曲線 its 繪制圖形 canvas一直是前端開發中不可或缺的一種用來繪制圖形的標簽元素，比如壓縮上傳的圖片、比如刮刮卡、比如制作海報、圖表插件等，很多人在面試的過程中也會被問到有沒有接觸過canvas圖形繪制。 定

H5上傳圖片之canvas

request foo lis idt rap subst splay rim src H5上傳圖片之canvas，使用canvas處理壓縮圖片再上傳 html代碼： <form action="" method="post"> <dl&

利用H5中canvas畫布繪製一個時鐘(動態)

注意：Internet Explorer 9、Firefox、Opera、Chrome 以及 Safari 支援 <canvas> 及其屬性和方法。Internet Explorer 8 以及更早的版本不支援 <canvas> 元素 效果圖如下：     實現

OpenCV3之——畫時鐘（同步本地時間）

本文是看了網上一個部落格的例項，覺得很好玩，複製程式碼，做了一些修改，調通了之後，做的一些分享。參考原文為：http://blog.csdn.net/xingchenbingbuyu/article/details/50762351 主要修改的地方：1、獲取系統時間  2、

利用canvas畫一個動態時鐘

目標：利用canvas畫布畫一個動態時鐘，根據目前的時間可以實時更新的，可以在過程中新增一些效果，比如讓時鐘外圍的一圈顏色漸變，時鐘上的數字顏色改變，時鐘的指標顏色改變。。。 設定一個定時器 先放上一張效果圖，參考一下 先建一個畫布，寫好樣式 <style type="text/css"&g

HTML5之Canvas時鐘小程式

這一段時間有空在看Canvas，由於以前開發過ActionScript版本的時鐘，想著Canvas也一定能夠實現，所以花了幾個小時來調了一下，最終出來了，很是開心，所以在這裡記錄一下： 首先奉上效果圖，雖然比較醜，沒有用CSS過多的去渲染，這裡完成了基本功能

html5之canvas困惑 在canvas標籤內需要設定了寬跟高，如果在css中設定同樣的寬跟高，畫出來的影象變形了？

<canvas class="cvs"></canvas>遇到的問題：如css 中設.cvs{width:500px;height:400px;}，也就是css改變了canvas的尺寸後，本來是可以畫出一個圓來，現在卻是一個扁平的圓，為什麼呀？如圖：什

Three.JS學習 7：使用Canvas畫一個時鐘

在canvas上畫時鐘 準備工作 取一張鐘錶的背景圖過來，放在images/ 資料夾下 準備canvas <html> <head> <title>Canvas Clock</title

Android canvas繪圖基礎之運動的時鐘

一、canvas繪製圖形 canvas可以繪製很多幾何圖形、文字等很多東西： 1. drawText 2. drawPoint 3. drawLine 4. drawRect 5. drawCircle 6. drawOval 7. drawA

用canvas畫一個時鐘

function clock(){ var ctx = document.getElementById("canvas").getContext("2d"); ctx.restore(); ctx.save(); ctx.lineWid

移動端Touch事件與H5-Canvas畫素點檢測實現刮刮樂

最近又被支付寶的集福字刷屏了 我到底還是沒看到敬業福ค(TㅅT) 心塞 今天給大家帶來移動端的刮刮樂實現 效果就是這樣的 手滑動觸發刮卡 當刮卡面積達到70%以上，自動刮開全部灰色圖層 程式碼不是很多 全部程式碼就這些 <!

原生JS的<canvas>標簽畫時鐘

什麽 lock 坐標 clas width 設置 true drawing 指定 　　首先要申明本人對於美除了美女真沒什麽要求。 　　其次講講次學習碰到重要知識點： 　　1、畫圓（弧）： 　　　　context.arc(x, y, radius, Math.PI /

UGUI之Canvas Group

如果 lar ble cast com alpha 技術 span ugui 可以通過Canvas Group影響該組UI元素的部分性質，而不需要費力的對該組UI下的每個元素逐個調整。Canvas Group是同時作用於該組UI下的全部元素。 參數：Alpha：該組UI

UGUI之Canvas和EventSystem

event 開啟 water phi 根據 mod jsb ngui 控件 先介紹一下UGUI必不可缺的兩個組件：Canvas和EventSystem 事實上在場景中第一次創建UGUI控件的時候，這兩個物體都會自動添加到場景中，當然，必不可缺的不是這兩個物體，而是他們身上

canvas繪畫時鐘及倒計時時鐘

整數 效果圖 有時 二維 -c 更新時間 enter 程序 etc 因為偶是一個前端小白，所以呢！！！！想要把自己在網上看的代碼，並且自己敲了一遍，做了註釋分享給大家~~~不喜勿噴，謝謝喲！我是super喵二（程序媛），大家一起成長！！！ 倒計時時鐘（先放效果圖）（好吧我

h5之scrollIntoView控制頁面元素滾動

參數 itl osi absolut cnblogs eight event 滾動 頁面元素 　　如果滾動頁面也是DOM沒有解決的一個問題。為了解決這個問題，瀏覽器實現了一下方法，以方便開發人員如何更好的控制頁面的滾動。在各種專有方法中，HTML5選擇了scrollInto

canvas畫小球

小球 idt pat req wid () height canvas += <canvas id="can" width="600px" height="300px" style="border: 1px solid black"></canvas&g