canvas動畫時鐘

在html**中，插入canvas標籤

設定canvas的css樣式

position:absolute;

left:50%;
top:50%;
transform:translate(-50%, -50%);

寫入了兩個畫布，乙個是為了畫靜態的表盤，另乙個是為了畫動態的指標

在js中建立畫布，進行相關的初始化設定

var width = 600;  

var height = 600;
var dialradius = 200; //表盤半徑
var cx = width / 2;
var cy = height / 2;
//獲取canvas
var dialcanvas = document.getelementbyid("dialcanvas");
var handcanvas = document.getelementbyid("handcanvas");
//設定畫布大小
dialcanvas.width = width;
dialcanvas.height = height;
handcanvas.width = width;
handcanvas.height = height;
//獲取繪圖環境
var dialcxt = dialcanvas.getcontext("2d");
var handcxt = handcanvas.getcontext("2d");

繪製表盤

dialctx.beginpath();

dialctx.arc(dialx,dialy,dialradius,0,math.pi*2);
dialctx.linewidth=10;
dialctx.stroke();

下面要繪製表盤的刻度，我們把它封裝成乙個函式

各個引數的含義

/** 

*繪製刻度的函式

@param object ctx

@param number cx 圓心x座標

@param number cy 圓心y座標

@param number inenrradius 內半徑

@param number outerradius 外半徑

@param string stroke 刻度顏色

@param number strokewidth  刻度寬度

@param number numscales 刻度數量

*/

function drawscale(ctx,cx,cy,outerradius,innerradius,scalecount,scalewidth,scalecolor)

定義乙個定時函式讓指標能動起來

function runtime()

呼叫定時函式

runtime();

canvas動畫時鐘

最近在學canvas，然後根據mdn上的例子做了個動畫時鐘 為什麼要造個輪子，因為醜。這是mdn上的例子，怎麼說呢，比較復古吧。首先，找一張時鐘的，就是下面這張了。來自bigger than bigger的dribbble 侵刪 然後就開始用canvas實現這個逼格滿滿的時鐘吧。在html 中插入c...

canvas實現動畫時鐘

實現效果如下 1.建立canvas元素 沒有金剛鑽就不要攬瓷器活2.繪製雙圓 var drawing document.getelementbyid drawing if drawing.getcontext 3.繪製刻度 繪製刻度 context.font bold 14px arial cont...

Canvas繪製時鐘

首先，找一張時鐘的，就是下面這張了。來自bigger than bigger的dribbble 侵刪 然後就開始用canvas實現這個逼格滿滿的時鐘吧。在html 中插入canvas標籤 canvas id canvas width 400 height 400 canvas 由於瀏覽器對html5...