<!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();
// 创建指针层
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);
// 时针
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);
// 绘制圆心的小圆点
var centerCircle = new Konva.Circle({
x: w/2,
y: h/2,
radius: 10,
fill: "#000"
})
handLayer.add(centerCircle);
// 绘制指针层
handLayer.draw();
// 指针转动
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);
// 时针
var hours = date.getHours() % 12 + minutes/60;
hourHand.rotation(hours/12 * 360 - 90);
handLayer.draw();
setTimeout(run,1000);
}
run();
// 生成表盘刻度的构造函数
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";
// 创建组
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框架实现钟表动画
最后编辑于 :
©著作权归作者所有,转载或内容合作请联系作者
- 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
- 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
- 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
推荐阅读更多精彩内容
- 需求 在开发中,有这样的需求,view在某种操作下会有抽屉的展示,而且里面的文字会有翻滚的效果,如下: 即列表向上...
- 整体思路 定义一些常量,数据 ,扇形半径,圆的半径, 舞台的搭建 创建一个画扇形的构造函数,该构造函数通过传入数据...
- 版本记录 前言 app中好的炫的动画可以让用户耳目一新,为产品增色不少,关于动画的实现我们可以用基本动画、关键帧动...
- 版本记录 前言 app中好的炫的动画可以让用户耳目一新,为产品增色不少,关于动画的实现我们可以用基本动画、关键帧动...