Canvas線性漸變時間顯示（簡單特效）

阿新 • • 發佈：2019-01-19

附圖

原理

首先通過js獲取當前系統時間並建立一個數組將獲取到的時間中的時分秒解析出來儲存在陣列內；

var time=new Date();
//time_a陣列用於儲存時分秒資料
var time_a =[time.getHours(),time.getMinutes(),time.getSeconds()];

其次就是canvas作圖操作了，先建立一個畫布，對其進行線性漸變，字型顏色設定等操作，最後通過canvas中的strokeText()方法將時間陣列傳入其中，並設定一秒重新整理一次即可得到上述效果。程式碼如下，僅供參考學習。

注：採用jQuery純屬個人喜好，此專案jQuery用處不大，可自行用js程式碼代替。

HTML程式碼：

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Title</title>
   <script src="js/jquery.js"></script>
   <script src="js/8_13.js"></script>
   <style type="text/css" rel="stylesheet">
      canvas{
         background:#0C0C0C;
         display: block;
         margin:0 auto;
      }
   </style>
</head>
<body>
<canvas id="con" width="1000" height="600">
   您的瀏覽器不支援canvas
</canvas>
</body>
</html>

JS程式碼：

$(function () {
    var a = $("#con")[0];//獲取canvas物件
    var cxt = a.getContext('2d');
    function play(){
        var time=new Date();
        //time_a陣列用於儲存時分秒資料
        var time_a =[time.getHours(),time.getMinutes(),time.getSeconds()];
        cxt.clearRect(0,0,1000,600);//清空畫布，防止內容重疊
        cxt.beginPath();
        cxt.font='80px Arial';//設定字型大小和字型樣式
        cxt.lineWidth=2;//設定畫線粗細
        var grd = cxt.createLinearGradient(60,0,200,0); //橫向漸變
        grd.addColorStop(0,'red');
        grd.addColorStop(0.5,'green');
        grd.addColorStop(1,'blue');
        cxt.strokeStyle=grd;
        cxt.strokeText(time_a[0]+':'+time_a[1]+':'+time_a[2],60,100);
        cxt.closePath();
    }
    play();
    setInterval(play,1000);//每一秒重新整理一次
});

Canvas線性漸變時間顯示（簡單特效）

附圖原理首先通過js獲取當前系統時間並建立一個數組將獲取到的時間中的時分秒解析出來儲存在陣列內； var time=new Date(); //time_a陣列用於儲存時分秒資料 var time_a =[time.getHours(),time.getMinu

簡單的輪播圖（單張顯示，無特效）

HTML: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <

CSS3 linear-gradient線性漸變實現虛線等簡單實用圖形

選擇 www .html path 聲明寬高不同理論存在一、作為圖片存在的CSS3 gradient漸變我覺得CSS3 Backgrounds比較厲害的一個地方就是支持多背景，也就是背景圖片個數可以無限累加，正好CSS3的gradient漸變性質是backgro

時間操作（JavaScript版）—頁面顯示格式：年月日上午下午時分秒星期

XML ng- ava date led htm con edit innerhtml <!DOCTYPE html PUBLIC "-//W3C//DTD X

Expo大作戰(三十四)--expo sdk api之LinearGradient(線性漸變)，KeepAwake（保持屏幕不休眠）,IntentLauncherAndroid,Gyroscope，

con border app face 圖片 parent ext activate -- 簡要：本系列文章講會對expo進行全面的介紹，本人從2017年6月份接觸expo以來，對expo的研究斷斷續續，一路走來將近10個月，廢話不多說，接下來你看到內容，講全部來與

Java數據結構（線性表-->順序表簡單實現）

str out ret rgs sem emp 效果 tab 廣泛線性表是一種可以在任意位置插入和刪除元素，由n個同類型元素組成的線性結構。主要包括順序表，單鏈表，循環單鏈表，雙向鏈表和仿真鏈表。應用比較廣泛的是順序表和單鏈表。 2 下面是線性表的接口，主要操作包括

顯示時間原始碼（伺服器&瀏覽器）

<%@ page language="java" import="java.util.*" pageEncoding="gb2312"%><html> <head> <title>顯示時間</title>

時間操作（JavaScript版）—頁面顯示格式：年月日星期幾

<HTML> <HEAD> <META http-equiv=Content-Type content="text/html; charset=gb2312"> <title>頁面顯示格式：年月日星期幾</tit

如何從資料庫調出資料顯示到頁面 PHP+Mysql+Html（簡單例項）

首先顯示一下資料庫的資料頁面資訊 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> &l

計算時間複雜度--（簡單版）

步驟： 1、找到執行次數最多的語句 2、語句執行語句的數量級 3、用O表示結果計算時間複雜度的3個出發點，掌握這三個出發點，那麼一向搞不懂的時間複雜度就可以迎刃而解啦。然後： 1、用常數1取代執行時間中的所有加法常數 2、在修改後的執行次數函式中，只保留最高

uva 10474 Where is the Marble?（簡單題）

content mil stdlib.h std lib [0 數據 main pre 我非常奇怪為什麽要把它歸類到回溯上，明明就是簡單排序，查找就OK了。wa了兩次，我還非常不解的懷疑了為什麽會 wa，原來是我居然把要找的數字也排序了，當時僅僅是想著能快一點查找。所以

POJ 1321 棋盤問題（簡單DFS）

clas mission sample 標記 span ssi algo std spa 　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　棋盤問題 Time Limit: 1000MS

POJ 1979 Red and Black（簡單DFS）

either www enter ont false num present direction roo Red and Black Description There is a rectangular room, covered with square tile

UVa 12716 GCD XOR （簡單證明）

i++ map esp typedef -a type print const max 題意：問 gcd(i,j) = i ^ j 的對數（j <=i <= N ） N的範圍為30000000，有10000組例子思路：GCD(a,b) = a^b =

Powershell計算時間間隔（New-TimeSpan）

nbsp direct let 時間 times date unicode 計算 nth 在Windows PowerShell裏New-TimeSpan cmdlet提供了一種方法做日期算法。計算時間間隔：這個命令告訴你今天的日期與2006年除夕之間的

lightoj 1036 - A Refining Company（簡單dp）

esp scan blank 最大值 typedef 轉移 iostream ret for 題目鏈接：http://www.lightoj.com/volume_showproblem.php?problem=1036 題解：設dp[i][j]表示處理到（i，j）

第十一章 springboot + mongodb（簡單查詢）

req all bool pan 可能 set 如果創建使用 1、mongodb在mac上的安裝下載mongodb，https://www.mongodb.org/ 解壓縮到一個指定文件夾，如：/Users/enniu1/Desktop/zjg/mongodb

一種排序（nyoj8）（簡單排序）

scan http -a tdi 輸入 clu truct clr -c 一種排序時間限制：3000 ms | 內存限制：65535 KB 難度：3 描寫敘述如今有非常多長方形。每個長方形都有一個編號，這個編號能夠反復。還知道

循環鏈表的創建、插入、刪除、逆序、顯示（C++實現）

i++ pos str pre hide mar add 這樣的 itl 對於單鏈表，因為每一個結點僅僅存儲了向後的指針。到了尾標誌就停止了向後鏈的操作，這樣，其中某一結點就無法找到它的前驅結點了。對於單鏈表的操作大家能夠看我的這篇博客http://

bootstrap modal垂直居中（簡單封裝）

math str class ria extend splay play 觸發代碼未封裝前： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"&

Canvas線性漸變時間顯示（簡單特效）

相關推薦