2. 程式人生 > >html5小栗子---canvas時鐘

html5小栗子---canvas時鐘

阿新 • • 發佈：2019-02-19
var cvs=document.getElementById('clock'); var ctx=cvs.getContext('2d'); var oImg=document.getElementById('pic'); function clock() { ctx.clearRect(0,0,400,400); var img=document.getElementById('pic'); ctx.drawImage(img,100,100,200,200);//引入圖片做背景 //畫圓 ctx.beginPath(); ctx.strokeStyle='#60D9F8'
; ctx.arc(200,200,150,0,360*Math.PI/180,false); ctx.lineWidth=4; ctx.stroke(); ctx.clip(); ctx.drawImage(oImg,50,50,300,300); ctx.closePath(); //畫分刻度 for(var i=0;i<60;i++){ ctx.save(); ctx.beginPath(); ctx.translate(200
,200);//重新對映畫布(200,200)的位置 ctx.rotate(i*6*Math.PI/180);//旋轉當前繪圖 ctx.strokeStyle='#FF99CC'; ctx.lineWidth=3; ctx.moveTo(0,-140);//在半徑的線上,把路徑移動到畫布中的指定點，不建立線條。 ctx.lineTo(0,-150); ctx.stroke(); ctx.closePath(); ctx.restore(); } //畫時刻度
for(var i=0;i<12;i++){ ctx.save(); ctx.beginPath(); ctx.translate(200,200);//重新對映畫布(200,200)的位置 ctx.rotate(i*30*Math.PI/180);//旋轉當前繪圖 ctx.strokeStyle='#6699CC'; ctx.lineWidth=5; ctx.moveTo(0,-135);//在半徑的線上,把路徑移動到畫布中的指定點，不建立線條。 ctx.lineTo(0,-150); ctx.stroke(); ctx.closePath(); ctx.restore(); } //獲取時間 var now=new Date(); var second=now.getSeconds(); var minute=now.getMinutes()+second/60; var hour=now.getHours()+minute/60; //寫時間 var h2=now.getHours(); var m2=now.getMinutes(); var str1=h2>9?h2:('0'+h2); var str2=m2>9?m2:('0'+m2); ctx.beginPath(); ctx.fillStyle='#000'; ctx.font='20px 微軟雅黑'; ctx.fillText(str1+':'+str2,175,320); ctx.closePath(); //畫時針 ctx.beginPath(); ctx.strokeStyle='#CCFFFF'; ctx.moveTo(200,200); ctx.arc(200,200,80,(hour*30-90)*Math.PI/180,(hour*30-90)*Math.PI/180,false); ctx.stroke(); //畫分針 ctx.beginPath(); ctx.moveTo(200,200); ctx.arc(200,200,100,(minute*6-90)*Math.PI/180,(minute*6-90)*Math.PI/180,false); ctx.stroke(); //畫秒針 ctx.beginPath(); ctx.moveTo(200,200); ctx.arc(200,200,120,(second*6-90)*Math.PI/180,(second*6-90)*Math.PI/180,false); ctx.stroke(); } clock(); setInterval(clock,1000);

相關推薦

html5小栗子---canvas時鐘

var cvs=document.getElementById('clock'); var ctx=cvs.getContext('2d'); var oImg=document.getElementById('pic'); function clock() {

HTML5之Canvas時鐘小程式

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

使用JS和Canvas做一個html5小遊戲

這是一個很簡單的html5遊戲，通過學習原博文自己做了些改造， 這是遊戲的截圖： 1.有計算抓住的怪物的數量 2.有背景，英雄，怪物。 第一步：建立html檔案和js檔案 建立一個games資料夾，在資料夾中建立js資料夾，images資料夾，以

微信小程式canvas動態時鐘

canvas時鐘效果圖：程式碼：wxml:<view style='width:100%;height:{{canvasHeight}}px' catchtap='goCountdown'catchlongtap='touchstart' catchtouchend='

分享個HTML5 canvas時鐘的程式碼

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>HTML CLOCK</title> </head> <body

遞歸的小栗子

遞歸遞歸函數特點：每一級函數調用時都有自己的變量，但是函數代碼並不會得到復制，如計算5的階乘時每遞推一次變量都不同；每次調用都會有一次返回，如計算5的階乘時每遞推一次都返回進行下一次；遞歸函數中，位於遞歸調用前的語句和各級被調用函數具有相同的執行順序；遞歸函數中，位於遞歸調用後的語句的執行順序和各個被調用函數

html5小總結

發生 著圖 不足 時間 解決 代碼 重構 打開 頁面 1.背景圖片和插入圖片的區別： 　　1>.在網頁中如果插入了一張圖片後，容器會隨著圖片的大小發生變化；如果插入一張背景圖片容器不會隨著圖片的大小而變化。 　　2>.插入圖片如果太小不會對網頁的容器帶來任何影響

canvas--時鐘

utf-8 line arc reac red 2個 post false rec 可以進群領取 WEB前端學習交流群21 598399936 <!DOCTYPE html><html lang="en"><head> <

this小栗子（高程）

調用 函數賦值 nbsp 返回 計算 能夠 bsp this name this對象在運行時基於函數的執行環境進行綁定。 全局函數中，this等於window var name=‘san‘; var obj = { 　　name:‘yu‘, 　　getName:functi

原生js之canvas時鐘組件

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

微信小程序 | canvas繪圖

base 資深 none 高清 can 知識 status dff link 1、新的尺寸單位 rpx 　　rpx（responsive pixel）: 可以根據屏幕寬度進行自適應。 　　規定屏幕寬為750rpx。如在 iPhone6 上，屏幕寬度為375px，共有750個

HTML5小遊戲-簡單抽獎小遊戲

ice orm store scrip stroke meta for oct 樣式 　　換了新工作以後，專註前端開發，平常空閑時間也比較多，可以多鉆研一下技術，寫一下博客。最近在學習canvas，參考網上的slotmachine插件，用canvas實現了一個簡單抽獎小遊戲

小程序---canvas畫圖，生成分享圖片，畫圖文字換行

return 指正 png ttext def fun context lte ctx 小程序目前只支持轉發，不支持分享朋友圈，為了能實現分享，很多線上小程序通過生成分享圖片，保存到相冊來給用戶增加分享的可能。 具體思路及簡要代碼如下： 一：canvas畫圖 draw

微信小程序 canvas 繪圖問題總結

全局變量 矩形 wot hcm 像素 ces 地圖 源碼 order 業務中碰到微信小程序需要生成海報進行朋友圈分享，這個是非常常見的功能，沒想到實際操作的時候花了整整一天一夜才搞好，微信的 canvas 繪圖實在是太難用了，官方快點優化一下吧。 業務非常簡單，只需要將用到

python3中線程中event的小栗子

線程 print zha false scripts import pre wait finished import threading, timeclass Boss(threading.Thread): def run(self): print("b

小程序canvas使用，及一些坑，以及自己的一些小總結

開發 背景圖 height java gda 數據 利用 let 宋體 自己做了一個小程序，主要用於給頭像加圖標的那種，和qq似的，主要用canvas做的， 第一回用，掉了很多坑，所以今天系統的總結一下自己所做的，如果大家有不理解的地方，歡迎提問 canvas可以用來畫一

微信小程序-canvas繪制文字實現自動換行

就是 creat 代碼 eas fun 一定的 文本 分割 func 在使用微信小程序canvas繪制文字時，時常會遇到這樣的問題：因為canvasContext.fillText參數為 我們只能設置文本的最大寬度，這就產生一定的了問題。如果我們繪制的文本長度不確定或者我

利用哨兵簡化編程的一個小栗子

char 存在 else 實現 如果 代碼 返回 比較 mage // 在數組 a 中，查找 key，返回 key 所在的位置 // 其中，n 表示數組 a 的長度 // 我舉 2 個例子，你可以拿例子走一下代碼 // a = {4, 2, 3, 5, 9, 6} n=

利用哨兵簡化程式設計的一個小栗子

// 在陣列 a 中，查詢 key，返回 key 所在的位置 // 其中，n 表示陣列 a 的長度 // 我舉 2 個例子，你可以拿例子走一下程式碼 // a = {4, 2, 3, 5, 9, 6} n=6 key = 7 // a = {4, 2, 3, 5, 9, 6} n=6 key = 6

微信小程式 canvas 問題

微信小程式 canvas 問題 問題描述 場景：當前頁面用 canvas 畫了個圖片，獲取到臨時路徑；之後再用這個臨時路徑去畫圖，手機上會出現畫不出來或者畫不全的情況；開發者工具沒問題。 解決方案 原因不明，小程式的問題，儘量避免這種場景，沒有找到解決方案