<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
</head>
<body>
<div id="box"></div>
</body>
<script src="../bower_components/konva/konva.min.js"></script>
<script type="text/javascript">
var w = 800;
var h = 600;
var r = 200;
var stage = new Konva.Stage({
container: "box",
width: w,
height: h
});
var dialLayer = new Konva.Layer();
stage.add(dialLayer);
// 繪制表盤
var dialCircle = new Konva.Circle({
x: w/2,
y: h/2,
radius: r,
stroke: "#000",
strokeWidth: 10,
fill: "#eee"
});
dialLayer.add(dialCircle);
// 繪制刻度
var bigDialScale = new DialScale({
x: w/2,
y: h/2,
outerRadius: r,
innerRadius: r-20,
stroke: "#000",
strokeWidth: 10,
number: 12
});
dialLayer.add(bigDialScale);
// 繪制小刻度
var smallScale = new DialScale({
x: w/2,
y: h/2,
outerRadius: r,
innerRadius: r-10,
stroke: "#000",
strokeWidth: 2,
number: 60
});
dialLayer.add(smallScale);
// 繪制
dialLayer.draw();
// 創(chuàng)建指針層
var handLayer = new Konva.Layer();
stage.add(handLayer);
var secondHand = new Konva.Line({
x: w/2,
y: h/2,
points: [-20,0,180,0],
stroke: "red",
strokeWidth: "2",
rotation: 0
});
handLayer.add(secondHand);
// 繪制分針
var minuteHand = new Konva.Line({
x: w/2,
y: h/2,
points: [-20,0,150,0],
stroke: "#000",
strokeWidth: "5",
rotation: 0
});
handLayer.add(minuteHand);
// 時(shí)針
var hourHand = new Konva.Line({
x: w/2,
y: h/2,
points: [-20,0,120,0],
stroke: "#000",
strokeWidth: "8",
rotation: 0
});
handLayer.add(hourHand);
// 繪制圓心的小圓點(diǎn)
var centerCircle = new Konva.Circle({
x: w/2,
y: h/2,
radius: 10,
fill: "#000"
})
handLayer.add(centerCircle);
// 繪制指針層
handLayer.draw();
// 指針轉(zhuǎn)動(dòng)
function run(){
var date = new Date();
// 秒針
var seconds = date.getSeconds();
secondHand.rotation(seconds/60 * 360 - 90);
// 分針
var minutes = date.getMinutes() + seconds/60;
minuteHand.rotation(minutes/60 * 360 - 90);
// 時(shí)針
var hours = date.getHours() % 12 + minutes/60;
hourHand.rotation(hours/12 * 360 - 90);
handLayer.draw();
setTimeout(run,1000);
}
run();
// 生成表盤刻度的構(gòu)造函數(shù)
function DialScale(options){
options = options || {};
options.x = options.x || 0;
options.y = options.y || 0;
options.outerRadius = options.outerRadius || 0;
options.innerRadius = options.innerRadius || 0;
options.number = options.number || 12;
options.strokeWidth = options.strokeWidth || 10;
options.stroke = options.stroke || "#000";
// 創(chuàng)建組
var group = new Konva.Group({
x: options.x,
y: options.y
});
var angle = 0;
var angleDiff = 360/options.number;
for(var i=0; i<options.number; i++){
var line = new Konva.Line({
points: [
Math.cos(angle/180*Math.PI)*options.outerRadius,
Math.sin(angle/180*Math.PI)*options.outerRadius,
Math.cos(angle/180*Math.PI)*options.innerRadius,
Math.sin(angle/180*Math.PI)*options.innerRadius
],
stroke: options.stroke,
strokeWidth: options.strokeWidth
});
group.add(line);
angle+=angleDiff;
}
return group;
}
</script>
</html>
Canvas Konva框架實(shí)現(xiàn)鐘表動(dòng)畫
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
- 文/潘曉璐 我一進(jìn)店門，熙熙樓的掌柜王于貴愁眉苦臉地迎上來荠耽，“玉大人钩骇，你說我怎么就攤上這事。” “怎么了倘屹？”我有些...
- 文/不壞的土叔 我叫張陵，是天一觀的道長(zhǎng)纽匙。 經(jīng)常有香客問我务蝠，道長(zhǎng)烛缔，這世上最難降的妖魔是什么？ 我笑而不...
- 正文 為了忘掉前任力穗，我火速辦了婚禮毅弧，結(jié)果婚禮上当窗，老公的妹妹穿的比我還像新娘。我一直安慰自己崖面，他們只是感情好元咙，可當(dāng)我...
- 文/花漫 我一把揭開白布巫员。 她就那樣靜靜地躺著，像睡著了一般简识。 火紅的嫁衣襯著肌膚如雪赶掖。 梳的紋絲不亂的頭發(fā)上七扰，一...
- 文/蒼蘭香墨 我猛地睜開眼枣耀，長(zhǎng)吁一口氣：“原來是場(chǎng)噩夢(mèng)啊……” “哼霉晕！你這毒婦竟也來了捞奕？” 一聲冷哼從身側(cè)響起，我...
- 序言：老撾萬榮一對(duì)情侶失蹤颅围，失蹤者是張志新（化名）和其女友劉穎伟葫，沒想到半個(gè)月后院促，有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體，經(jīng)...
- 正文 獨(dú)居荒郊野嶺守林人離奇死亡常拓，尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
- 正文 我和宋清朗相戀三年，在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了弄抬。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片茎辐。...
- 正文 年R本政府宣布速警，位于F島的核電站鸯两，受9級(jí)特大地震影響，放射性物質(zhì)發(fā)生泄漏甩卓。R本人自食惡果不足惜鸠匀，卻給世界環(huán)境...
- 文/蒙蒙 一逾柿、第九天 我趴在偏房一處隱蔽的房頂上張望缀棍。 院中可真熱鬧机错，春花似錦、人聲如沸弱匪。這莊子的主人今日做“春日...
- 文/蒼蘭香墨 我抬頭看了看天上的太陽斥难。三九已至，卻和暖如春哑诊，著一層夾襖步出監(jiān)牢的瞬間群扶，已是汗流浹背。 一陣腳步聲響...
- 正文 我出身青樓，卻偏偏與公主長(zhǎng)得像担猛，于是被迫代替她去往敵國和親汪疮。 傳聞我的和親對(duì)象是個(gè)殘疾皇子，可洞房花燭夜當(dāng)晚...
推薦閱讀更多精彩內(nèi)容
- 需求 在開發(fā)中智嚷，有這樣的需求，view在某種操作下會(huì)有抽屜的展示纺且，而且里面的文字會(huì)有翻滾的效果，如下： 即列表向上...
- 整體思路 定義一些常量,數(shù)據(jù) ,扇形半徑,圓的半徑, 舞臺(tái)的搭建 創(chuàng)建一個(gè)畫扇形的構(gòu)造函數(shù),該構(gòu)造函數(shù)通過傳入數(shù)據(jù)...
- 版本記錄 前言 app中好的炫的動(dòng)畫可以讓用戶耳目一新载碌，為產(chǎn)品增色不少，關(guān)于動(dòng)畫的實(shí)現(xiàn)我們可以用基本動(dòng)畫嫁艇、關(guān)鍵幀動(dòng)...
- 運(yùn)動(dòng)的效果一般上都是在一定的時(shí)間內(nèi)對(duì)其樣式進(jìn)行更改朗伶，從而在視覺上達(dá)到運(yùn)動(dòng)的感覺步咪。這時(shí)候就要利用setInterva...
- 版本記錄 前言 app中好的炫的動(dòng)畫可以讓用戶耳目一新，為產(chǎn)品增色不少猾漫，關(guān)于動(dòng)畫的實(shí)現(xiàn)我們可以用基本動(dòng)畫点晴、關(guān)鍵幀動(dòng)...
