12、用Canvas繪製背景時鐘

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <canvas id="clock" width="500px" height="500px" style="background: #000"></canvas>
    <script>
        var canvas=document.getElementById 
("clock");
        var cxt=canvas.getContext("2d");
        function drawClock(){ 
            // 獲取系統時間   
            var date=new Date();
            var hour=date.getHours();
            var min=date.getMinutes();
            var sec=date.getSeconds();
            // alert(hour);
            hour>12 
?hour-12:hour;
            // 清空畫布
            cxt.clearRect(0,0,canvas.width,canvas.height);
            //繪製時刻度                    
            cxt.strokeStyle="blue";
            cxt.lineWidth=10;
            cxt.beginPath(); //起始一條路徑  
            cxt.arc(250,250,200,0,Math.PI*2);
            cxt.stroke();             

            cxt.closePath();//結束路徑   
            cxt.clip();//按圓框裁剪時鐘背景圖

            // 繪製錶盤背景
            var img =new Image();
            img.src="clock.jpg";
            cxt.drawImage(img,40,40,420,420);


            for(var i=0;i<12;i++){
            cxt.save();
            cxt.strokeStyle="yellow";
            cxt.lineWidth=7;
            cxt.translate(250,250);//設定原點
            cxt.rotate(30*i*Math.PI/180);//設定旋轉角度,隔30度畫一個分刻度
            cxt.beginPath();
            cxt.moveTo(0,-197);
            cxt.lineTo(0,-175);
            cxt.stroke();
            cxt.closePath();
            cxt.restore();
            }
            //繪製分刻度
            for(var i=0;i<60;i++){
            cxt.save();
            cxt.strokeStyle="yellow";
            cxt.lineWidth=5;
            cxt.translate(250,250);//設定原點
            cxt.rotate(6*i*Math.PI/180);//設定旋轉角度,隔30度畫一個分刻度
            cxt.beginPath();
            cxt.moveTo(0,-195);
            cxt.lineTo(0,-185);
            cxt.stroke();
            cxt.closePath();
            cxt.restore();
            }
            // 繪製時針
            cxt.save();
            cxt.strokeStyle="blue";
            cxt.lineWidth=7;
            cxt.translate(250,250);
            cxt.rotate(hour*30*Math.PI/180);            
            cxt.beginPath();
            cxt.moveTo(0,-130);
            cxt.lineTo(0,0);
            cxt.stroke();
            cxt.closePath();
            cxt.restore();

            //繪製分針
            cxt.save();
            cxt.strokeStyle="yellow";
            cxt.lineWidth=4;
            cxt.translate(250,250);
            cxt.rotate(min*6*Math.PI/180);
            cxt.beginPath();
            cxt.moveTo(0,-150);
            cxt.lineTo(0,0);
            cxt.stroke();
            cxt.closePath();
            cxt.restore();

            // 繪製秒針
            cxt.save();
            cxt.strokeStyle="red";
            cxt.lineWidth=3;
            cxt.translate(250,250);
            cxt.rotate(sec*6*Math.PI/180);
            cxt.beginPath();
            cxt.moveTo(0,-170);
            cxt.lineTo(0,0);
            cxt.stroke();
            cxt.closePath();
           // cxt.restore();

            // 美化錶盤,中間小圓
            cxt.beginPath();
            cxt.arc(0,0,7,0,Math.PI*2);
            cxt.fillStyle="yellow";
            cxt.fill();
            cxt.strokeStyle="red";
            cxt.stroke();
            cxt.closePath();

            // 秒針上的小圓
            cxt.beginPath();
            cxt.arc(0,-140,7,0,Math.PI*2);
            cxt.fillStyle="yellow";
            cxt.fill();
            cxt.strokeStyle="red";
            cxt.stroke();
            cxt.closePath();
            cxt.restore();
        }
        drawClock();
        setInterval(drawClock,1000);//設定定時器

    </script>
</body>
</html>

效果圖：
這裡寫圖片描述

12、用Canvas繪製背景時鐘

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

使用canvas繪製LED時鐘

1 <script type="text/javascript"> 2 var canvas,ctx; 3 var canvasW = 900,canvasH = 260; 4 var clockBox = document.g

微信小程式用canvas繪製的圖插入到分享中

用canvas繪製圖 createNewImg: function () { var that = this; var ctx = wx.createCanvasContext('mycanvas'); ctx.setFillStyle("#F4F4F4"); // context.set

用canvas製作一個時鐘

我想熟悉一下canvas的使用，參考一個例子做了一個能動態展示當前時刻的canvas時鐘。先看效果：實現思路：使用canvas繪圖第一步肯定是先獲取canvas元素物件，並定義上下文。 var clock = document.getElementById(

【python學習筆記】12：用matplotlib繪製3D函式影象

①用pyplot的figure()函式可以建立一個figure物件 ②以它為引數建立Axes3D物件，使之具有3D座標軸 ③pyplot的show()方法可以顯示所有figure物件 *顯示兩個3D座標軸 import matplotlib.pyplot as plt #

五、用matplotlib繪製精美的圖表

matplotlib是python最著名的繪相簿，它提供了一整套和matlab相似的命令API，十分適合互動式地進行製圖。本節通過幾個樣例來介紹下如何使用matplotlib繪製精美的圖表安裝方法 pip install matplotlib 繪製一元函式影象y=ax+b 建立single_va

使用 Canvas 繪製背景圖

提醒：本文最後更新於 1036 天前，文中所描述的資訊可能已發生改變，請謹慎使用。最近 iCloud Web 的 Beta 版換了 UI，整體風格變得和 iOS7 一致了。首頁圖示下方漂浮著若干大小不一的泡泡，十分夢幻。大家可以訪問 beta.icloud.com 體驗下，如果覺得泡泡不夠多，

android 開發 View _12_ 用Canvas 繪製一張圖片（部落格中演示用Canvas畫驗證碼圖片）

package net.yt.yuncare.widgets; import android.graphics.Bitmap; import android.graphics.Canvas; import android.graphics.Color; import and

用canvas繪製的折線圖 +解析

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> &l

用canvas畫一個時鐘

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

在Android上用Canvas繪製音訊波形圖

最近在研究VAD演算法，但調整引數時無法實時看到效果，於是決定將音訊波形實時繪製出來，並且語音部分和噪音部分用不同顏色的線條顯示，這樣就能立即看到VAD演算法對各種噪音型別的魯棒性為了簡化問題規模，先研究出怎麼在Android下實時繪製隨機生成波形的功能，後面再加入語音獲

用pyqt繪製一個無邊框、有陰影、帶圖片背景的（偽頂層）圓角視窗

物件：（要設定的只有Form和widget） widget在Form內，緊貼著Form，之間隔著Form的layoutMargin（邊緣）的寬度：物件Form的佈局（邊緣）設定：物件widget的佈局（邊緣）設定：思路：首先先交代：無邊框用：

利用canvas.save()、canvas.restore()、canvas.translate()、canvas.rotate()繪製一個時鐘錶盤

Android繪製座標系，原點在螢幕左上角，向右為x軸正方向，向下為y軸正方向。 canvas.save(); 這個方法作用是將已經繪製的影象儲存起來，讓後續的操作就好像在一個新圖層上操作一樣。 canvas.restore(); 這個方法可以理解

12、管理用戶安全

管理用戶安全 12、管理用戶安全1、創建和管理用戶用戶包括如下內容：唯一的用戶名、驗證方法、默認表空間、臨時表空間、用戶概要文件、初始使用組、用戶狀態。schema：用戶對象的集合模板(HR zhnagsan)create user zhnagsan profile

2018-3-13 12周2次課 Nginx安裝、默認虛擬主機、用戶認證、域名重定向

Nginx12.6 Nginx安裝[root@localhost ~]# cd /usr/local/src/ [root@localhost src]# wget http://nginx.org/download/nginx-1.12.2.tar.gz （過程省略） [root@localhost src

JAVAEE——BOS物流項目12：角色、用戶管理，使用ehcache緩存，系統菜單根據登錄人展示

查詢 fin 實現 class 添加權限 lsp 菜單功能 color 1 學習計劃 1、角色管理 n 添加角色功能 n 角色分頁查詢 2、用戶管理 n 添加用戶功能 n 用戶分頁查詢 3、修改Realm中授權方法（查詢數據庫） 4、使用ehcache緩存權限數據 n 添

canvas繪製圖形——直線、多邊形、七巧板

前言 canvas 是 html5 中的一個新元素，主要用於圖形的繪製，通過 JavaScript 來控制。<canvas> 標籤定義一個圖形容器，也可以叫做畫布，通過 js 指令碼可以繪製出各種各樣的影象。建立canvas 建立 canvas 只需要新增 canv

Quartz 2d 用CGContextRef 繪製各種圖形 (文字、圓、直線、弧線、矩形、扇形、橢圓、三角形、圓角形、貝塞爾曲線、圖片)

首先了解下 CGContextRef Graphics Context是圖形上下文，可以將其理解為一塊畫布，我們可以在上面進行繪畫操作，繪製完成後，將畫布放到我們的View 中顯示即可，View看著是一個畫框。自己學習時實現的Demo,希望對大家有幫助，具體的實現看程式碼，並有

小象學院Python入門基礎課程-五、案例2 分形樹繪製案例分析 #怎麼用Python繪製圖形#turtle庫

分形樹繪製 1.0–五角星的繪製 • 案例描述 • 案例分析 • 上機實驗 • turtle庫注意：呼叫turtle.exitonclick圖形窗口才會停在那裡！！！向右轉60度是直走方向的右手邊右轉60度！關於五角星的角度則應該右拐180-36=

python 64式: 第12式、用stevedore寫python外掛

先建立專案目錄: mystevedore 然後新建一個目錄: people，該目錄下面分別包含: __init__.py chinese.py english.py pluginBase.py 檔案 __init__.py 檔案內容為空 plugin

12、用Canvas繪製背景時鐘

相關推薦