<html>
<head>
<title>html5 clock</title>
</head>
<body>
<canvas id="clock" width=200 height=200 style="position:absolute;left:200;top:100"></canvas>
<script>
var clockCanvas = document.getElementById("clock");
var c = clockCanvas.getContext("2d");
function clock(){
var date = new Date();
var d = date.getSeconds();
var m = date.getMinutes();
var h = date.getHours();
c.beginPath();
c.arc(100,100,99,0,2*Math.PI);
c.moveTo(192,100);
c.arc(100,100,92,0,2*Math.PI);
c.textAlign = 'center';
c.fillText("O",100,100);
c.font = 'bold 16px Arial';
c.fillText("12",100,25);
c.fillText("6",100,185);
c.fillText("9",25,105);
c.fillText("3",175,105);
c.translate(100,100);
for(var i = 1;i<=12;i++){
if((i-1)%3!=0){
c.moveTo(0,-93);
c.lineTo(0,-75);
}
c.rotate(Math.PI/6);
}
c.closePath();
c.stroke();
c.beginPath();
c.lineWidth = 5;
c.rotate(Math.PI/6/300*(m*60+d));
c.moveTo(0,0);
c.lineTo(0,-70);
c.rotate(-Math.PI/6/300*(m*60+d));
c.rotate(Math.PI/6/3600*(h*3600+m*60+d));
c.moveTo(0,0);
c.lineTo(0,-50);
c.rotate(-Math.PI/6/3600*(h*3600+m*60+d));
c.closePath();
c.stroke();
c.beginPath();
c.rotate(Math.PI/6/5*d);
c.lineWidth = 2;
c.moveTo(0,0);
c.lineTo(0,-60);
c.rotate(-Math.PI/6/5*d);
c.moveTo(0,0);
c.arc(0,0,8,0,Math.PI*2);
c.closePath();
c.fill();
c.stroke();
}
clock();
setInterval(function(){
clockCanvas.width = 0;
clockCanvas.width = 200;
clockCanvas.height = 0;
clockCanvas.height = 200;
clock();
},1000);
</script>
</body>
</html>
分享到：
相关推荐
同时，你也学习了如何结合JavaScript的Date对象来获取当前时间，并根据时间更新时钟指针的位置。 这个压缩包中的文件“texiao2186_1560680787”可能是源代码或者示例的完整版本，如果需要进一步了解，你可以解压并...
使用canvas绘制的实时时钟
这个“html5 canvas绘制时钟表时间”项目就是利用Canvas API来实现一个实时显示时间的时钟效果。下面将详细解释相关知识点。 1. **HTML5 Canvas 基础**： - Canvas 是HTML5中的一个元素，通过JavaScript API提供了...
这篇博文“HTML5 Canvas绘制时钟”旨在介绍如何利用Canvas API创建一个实时更新的数字或指针式时钟。我们将深入探讨Canvas的基础知识、相关API以及实现时钟的具体步骤。 1. HTML5 Canvas基础 HTML5 Canvas是一个二...
接下来定义`drawClock`方法，用于在canvas上绘制时钟： ```javascript drawClock() { const ctx = this.data.ctx; const now = new Date(); // 清除画布 ctx.clearRect(0, 0, 300, 300); // 绘制时钟圆盘 ...
接着，我们分别创建了`drawHourHand`、`drawMinuteHand`和`drawSecondHand`函数来绘制时钟的指针，这些函数会根据当前时间计算出对应的角度。`drawHand`是绘制指针的通用函数，它接受角度、长度、线宽和线帽样式作为...
本教程将详细介绍如何使用canvas绘制一个动态的钟表，这涉及到JavaScript和Canvas API的基础知识。 首先，我们需要在HTML页面中创建一个canvas元素，并设置其id以便在JavaScript中引用： ```html <canvas id=...
在这个“html5 canvas云粒子数字时钟动画特效”中，我们看到的是Canvas技术与时间显示、粒子系统相结合的应用实例。下面将详细阐述相关知识点。 1. HTML5 Canvas API： HTML5 Canvas是一个基于矢量图形的画布，...
"用canvas画的会走的钟"是一个典型的使用Canvas技术实现的互动性时钟示例，它不仅展示出Canvas的基本绘图功能，还涉及到时间同步和动画更新的知识点。以下是对这个主题的详细说明： 1. **Canvas API基础**： - `...
现在，我们开始利用`arc`方法来绘制时钟的圆盘。`arc`方法接受中心点坐标、半径、起始角度和结束角度作为参数，我们可以用它来画出时钟的圆周： ```javascript ctx.beginPath(); ctx.arc(canvas.width / 2, canvas....
绘制时钟Canvas需要的知识点，案例 绘制时钟Canvas，源代码。精美手表、时钟案例。
这包括清除画布，计算角度，以及绘制时钟的各个部分（小时、分钟、秒钟和数字）。以下是基本的`drawClock`函数结构： ```javascript function drawClock() { ctx.clearRect(0, 0, canvas.width, canvas.height); ...
在我们开始编写代码之前，需要了解绘制时钟的基本思路。绘制一个时钟，需要确定以下几个关键部分：钟面、时针、分针和秒针。这些元素需要在canvas上精确地绘制，它们的位置会随着时间的推移而改变。 接下来，我们...
这个函数会获取当前的系统时间，并计算出时、分、秒对应的弧度值，然后更新canvas上的指针位置。 关于背景图片的更换，可以使用canvas的`drawImage`方法。开发者可以提供不同的图片URL，动态设置canvas的背景。这个...
使用 Canvas 以及日期对象等知识制作风景时钟效果
时钟的小时、分钟和秒针需要根据当前时间动态更新。这通常涉及到`Date`对象的使用，从中获取小时、分钟和秒数。然后，将这些值转换为角度，因为`arc()`方法接受的角度是以弧度表示的： ```javascript var now = new...
利用html5中的canvas绘制的时钟，动态的呈现当前的时分秒
在本例中，我们将在Canvas上绘制时钟的指针和数字，以模拟真实时钟的显示。 首先，我们需要在HTML中创建一个canvas元素，并设置其ID以便于后续的JavaScript访问： ```html <canvas id="clock" width="300" height=...
为了绘制时钟的数字和刻度，我们可以用`g2d.fillText()`和`g2d.rotate()`方法。`rotate()`允许我们根据当前的角度旋转坐标系，从而能够按正确的方向绘制刻度和数字。 为了使时钟动态显示时间，我们需要一个定时器...