下午碰到这个问题，刚开始懵了，理一下思路，很简单的事情。
function getDegree(hour,minute){
var degree=0;
var _m=6*minute;
var _h=30*hour+_m/12;
degree=_m-_h;
return degree;
}
顺着这个想法，使用canvas来绘制一个简单的钟表
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Clock</title>
</head>
<body>
<canvas id="canvas" width="400" height="400"></canvas>
<script type="text/javascript" src="line.js"></script>
<script type="text/javascript">
window.onload=function(){
var canvas=document.getElementById("canvas");
var context=canvas.getContext("2d");
var secondHand=new Line(50,1,'#ff0000');
var minuteHand=new Line(40,2,'#000000');
var hourHand=new Line(25,3,'#000000');
secondHand.x=minuteHand.x=hourHand.x=canvas.width/2;
secondHand.y=minuteHand.y=hourHand.y=canvas.height/2;
var count=0;
(function animationLoop(){
window.requestAnimationFrame(animationLoop,canvas);
if(count===60){
count=0;
var now=new Date();
var second=now.getSeconds();
secondHand.rotation=(second*6-90)*Math.PI/180;
var minute=now.getMinutes();
minuteHand.rotation=(minute*6-90)*Math.PI/180+secondHand.rotation/60;
var hour=now.getHours()%12;
hourHand.rotation=(hour*30-90)*Math.PI/180+minuteHand.rotation/12;
context.clearRect(0,0,canvas.width,canvas.height);
context.beginPath();
context.arc(canvas.width/2,canvas.height/2,60,0,Math.PI*2,true);
context.closePath();
context.stroke();
secondHand.paint(context);
minuteHand.paint(context);
hourHand.paint(context);
}else{
count++;
}
})();
};
</script>
</body>
</html>
下面是画线的函数
function Line(width,height,color){
this.x=0;
this.y=0;
this.width=width||100;
this.height=height||1;
this.color=color||'#ff0000';
this.rotation=0;
}
Line.prototype.paint=function(context){
context.save();
context.translate(this.x,this.y);
context.rotate(this.rotation);
context.strokeStyle=this.color;
context.lineWidth=this.height;
context.beginPath();
context.moveTo(0,0);
context.lineTo(this.width,0);
context.closePath();
context.stroke();
context.restore();
};
分享到：
相关推荐
在上面的代码中，我们创建了一个宽高均为300像素的canvas元素，并引用了一个名为`clock.js`的JavaScript文件，该文件将包含实现时钟绘制的逻辑。 接下来，我们需要在`clock.js`中编写JavaScript代码。这里，我们将...
接下来定义`drawClock`方法，用于在canvas上绘制时钟： ```javascript drawClock() { const ctx = this.data.ctx; const now = new Date(); // 清除画布 ctx.clearRect(0, 0, 300, 300); // 绘制时钟圆盘 ...
对于模拟时钟的制作，我们首先要在canvas上画出时钟的背景，这可能包括一个圆形的表盘、刻度线以及数字。我们可以使用`arc`方法画出圆形，`strokeRect`或`fillRect`绘制刻度线和数字。例如： ```javascript var ctx...
由于Canvas的实时绘制可能会消耗大量资源，开发者通常会采用一些优化策略，如只重绘需要变动的部分，减少不必要的计算，或者使用精灵图（Sprite Sheets）来合并多个图像，以降低重绘次数。 总的来说，...
Canvas是一个强大的绘图工具，它允许我们在网页上动态地绘制图形，而JavaScript则提供了时间处理和动画功能。结合这两个技术，我们可以构建一个不仅显示时间，而且具有视觉吸引力的交互式时钟。 首先，我们需要在...
"用canvas画的会走的钟"是一个典型的使用Canvas技术实现的互动性时钟示例，它不仅展示出Canvas的基本绘图功能，还涉及到时间同步和动画更新的知识点。以下是对这个主题的详细说明： 1. **Canvas API基础**： - `...
使用html5中的canvas标签+jquery绘制的时钟走动代码
这个源码示例将展示如何利用canvas的绘图API来构建一个模拟时钟，其中包括绘制时针、分针、秒针以及背景网格等元素，让网页上的时间显示与真实世界同步。 首先，创建一个HTML文件并在其中包含一个canvas元素，指定...
在本例中，我们将在Canvas上绘制时钟的指针和数字，以模拟真实时钟的显示。 首先，我们需要在HTML中创建一个canvas元素，并设置其ID以便于后续的JavaScript访问： ```html <canvas id="clock" width="300" height=...
在这个模拟时钟效果中，HTML5可能主要通过`<canvas>`元素来提供画布，用于绘制时钟的各个部分，或者通过`<div>`元素构建时钟的结构。 2. **CSS3关键属性**： - **Transform**：这是CSS3中一个非常重要的属性，用于...
canvas提供了丰富的绘图API，如`moveTo()`, `lineTo()`, `strokeStyle`等，可以用来绘制线段，模拟时钟的指针。我们需要计算出指针的角度，根据当前的时间（小时、分钟、秒）进行转换。例如，分钟指针角度是当前分钟...
在“clock.js”这个项目中，我们利用HTML5的Canvas API来实现了一个简单的模拟时钟。这个时钟不仅能够实时显示当前时间，还展示了JavaScript与Canvas结合的强大潜力。 首先，我们要了解Canvas的基本概念。Canvas是...
总的来说，"模拟时钟Myclock"项目展示了Android开发中的几个核心技能：自定义控件的创建、`PageView`的使用、`Canvas`的图形绘制以及位图操作。通过对这些知识点的掌握，开发者能够构建出功能丰富且具有视觉吸引力的...
这个压缩包“html5基于canvas实现的圆形时钟效果源码.zip”显然包含了一个利用HTML5 Canvas绘制动态圆形时钟的示例代码。 Canvas是HTML5的一个核心元素，它提供了一个二维绘图环境，允许JavaScript直接在网页上绘制...
开发者可以研究这个项目来学习如何用Canvas绘制动态图形，如何结合jQuery制作动画，以及如何使用CSS增强视觉表现。同时，这个案例也展示了现代网页开发中技术融合的魅力，对于提升开发者的技术水平和创新能力...
接下来，我们创建一个JavaScript文件（如"模拟时钟.js"），并在其中获取`<canvas>`元素，然后创建一个绘图上下文（`CanvasRenderingContext2D`）： ```javascript var canvas = document.getElementById('clock'); ...
在Android平台上，开发一款模拟时钟应用是一种常见的实践，它能帮助开发者深入理解自定义View的概念和Android图形绘制。本文将详细探讨如何实现一个“Android模拟时钟”，以及在这个过程中涉及的关键技术点。 首先...
以上就是使用canvas绘制超炫时钟的基本流程。这个过程不仅涉及到HTML5 canvas的绘图技术，还涉及到基本的几何和三角函数知识，如正弦、余弦以及角度与弧度的转换。通过这种方式，我们可以创建出极具视觉吸引力的交互...
为了在Canvas上绘制时钟，我们需要获取到Canvas的2D渲染上下文，通过`canvas.getContext('2d')`方法实现。 时钟的绘制可以分为几个部分：时针、分针、秒针和数字刻度。每一部分都需要计算其在圆上的位置，这涉及到...