Use HTML 5 to create a simple clock effect
Let’s take a look at the final effect first:
It looks like a very simple clock effect, but the specific implementation code still contains acquired some key knowledge.
The following is the specific implementation code:
(Tip: Pay special attention to the use of fillText drawhand and the calculation of the angle)
<%--
Document : 时钟
Created on : 2016-5-19, 9:49:29
Author : Administrator
--%>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JSP Page</title>
</head>
<style>
canvas{
border: 1px solid black;
}
</style>
<script>
(function(){
//cavas元素对象
var canvas=null;
//canvas的3d上下文
var ctx=null;
//cavan的尺寸
var cw=0;
var ch=0;
/**
* 页面导入时的事件处理
*/
window.addEventListener("load",function(){
canvas=document.getElementById("sample");
ctx=canvas.getContext("2d");
cw=parseInt(canvas.width);
ch=parseInt(canvas.height);
ctx.translate(cw/2, ch/2);
//绘制时钟
draw_watch();
},false);
/**
* 绘制时钟
*/
function draw_watch(){
//清空Canvas
ctx.clearRect(-cw/2,-ch/2,cw,ch);
//计算针的最大长度
var len=Math.min(cw, ch)/2;
//绘制刻度盘
var tlen=len*0.85;
ctx.font="14px 'Arial'";
ctx.fillStyle="black";
ctx.textAlign="center";
ctx.textBaseLine="middle";
for(var i=0; i<12; i++){
var tag1=Math.PI*2*(3-i)/12;
var tx=tlen * Math.cos(tag1);
var ty=-tlen * Math.sin(tag1);
ctx.fillText(i,tx,ty);
}
//获取当前的时分秒
var d=new Date();
var h=d.getHours();
var m=d.getMinutes();
var s=d.getSeconds();
if(h >12 ){
h=h-12;
}
//绘制时针
var angle1 = Math.PI * 2 *(3 - (h+ m/60))/12;
var length1=len * 0.5;
var width1=5;
var color1="#000000";
drawhand(angle1,length1,width1,color1);
//绘制分针
var angle2 = Math.PI * 2 *(15 - (m+ s/60))/60;
var length2=len * 0.7;
var width2=3;
var color2="#555555";
drawhand(angle2,length2,width2,color2);
//绘制秒针
var angle3 = Math.PI * 2 *(15 - s)/60;
var length3=len * 0.8;
var width3=1;
var color3="#aa0000";
drawhand(angle3,length3,width3,color3);
//设置timer
setTimeout(draw_watch,1000);
}
/**
* 针绘制函数
*/
function drawhand(angle,len,width,color){
//计算针端的坐标
var x=len*Math.cos(angle);
var y=-len * Math.sin(angle);
//绘制针
ctx.strokeStyle=color;
ctx.lineWidth=width;
ctx.lineCap="round";
ctx.beginPath();
ctx.moveTo(0,0);
ctx.lineTo(x,y);
ctx.stroke();
}
})();
</script>
<body>
<canvas id="sample" width="150" height="150"></canvas>
</body>
</html>Related recommendations: html5 tutorial
The above is the detailed content of Use HTML 5 to create a simple clock effect. For more information, please follow other related articles on the PHP Chinese website!
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
1386
52
Clock app missing in iPhone: How to fix it
May 03, 2024 pm 09:19 PM
Is the clock app missing from your phone? The date and time will still appear on your iPhone's status bar. However, without the Clock app, you won’t be able to use world clock, stopwatch, alarm clock, and many other features. Therefore, fixing missing clock app should be at the top of your to-do list. These solutions can help you resolve this issue. Fix 1 – Place the Clock App If you mistakenly removed the Clock app from your home screen, you can put the Clock app back in its place. Step 1 – Unlock your iPhone and start swiping to the left until you reach the App Library page. Step 2 – Next, search for “clock” in the search box. Step 3 – When you see “Clock” below in the search results, press and hold it and
How to use multiple timers on iPhone with iOS 17
Jun 21, 2023 am 08:18 AM
What are multi-timers on iOS17? In iOS17, Apple now offers users the ability to set multiple timers at once on their iPhone. This is a welcome change, one that many have been waiting for for years. The Clock app, which before iOS 16 only allowed users to set one timer at a time, can now be used to activate any number of timers, making it ideal for completing multiple tasks at once. You can set any number of timers in the timer screen. Once the timer is started, all active timers will appear as "Live Activity" notifications on the lock screen and Notification Center. From here, you can view the remaining time until the timer is off, pause, or stop the timer without opening the Clock app. when you are on the clock
iOS 17: How to change iPhone clock style in standby mode
Sep 10, 2023 pm 09:21 PM
Standby is a lock screen mode that activates when the iPhone is plugged into the charger and oriented in horizontal (or landscape) orientation. It consists of three different screens, one of which is displayed full screen time. Read on to learn how to change the style of your clock. StandBy's third screen displays times and dates in various themes that you can swipe vertically. Some themes also display additional information, such as temperature or next alarm. If you hold down any clock, you can switch between different themes, including Digital, Analog, World, Solar, and Floating. Float displays the time in large bubble numbers in customizable colors, Solar has a more standard font with a sun flare design in different colors, and World displays the world by highlighting
![How to turn off alarms on iPhone [2023]](https://img.php.cn/upload/article/000/465/014/169259550735100.png?x-oss-process=image/resize,m_fill,h_207,w_330)
How to turn off alarms on iPhone [2023]
Aug 21, 2023 pm 01:25 PM
Since the advent of smartphones, they have undoubtedly replaced alarm clocks. If you own an iPhone, you can use the Clock app to easily set as many alarms for multiple occasions throughout the day. The app lets you configure the alarm time, the tone, how often it repeats, and whether you want to delay them using the Snooze option. If you want to turn off the alarm you have set, the following post should help you disable and delete regular alarms and wake-up alarms on your iPhone. How to Turn Off a Regular Alarm on iPhone By default, when you add an alarm on the Clock app or ask Siri to add an alarm for you, you're actually creating a regular alarm. You can create as many alarm clocks on your iPhone as you like and put them
How to customize standby color in iOS 17
Sep 23, 2023 pm 12:53 PM
Apple offers a new lock screen mode in iOS 17 called Standby Mode, which activates when your iPhone is plugged into a charger (wired or wireless) and placed on a stand in landscape orientation. This mode will show more information at a glance than the standard lock screen by showing the clock, weather data, calendar, and some widgets. After enabling this feature in settings, your iPhone will automatically enter standby mode when placed in landscape orientation while charging. How to change standby colors in iOS 17 Standby mode offers a set of three pages (Widgets, Photos, and Clock) that you can switch back and forth by swiping on the screen. Of these pages, only the Clock screen lets you customize the colors displayed on the screen so you can
What should I do if my win10 computer clock is always inaccurate? Several ways to adjust the win10 computer time
Mar 27, 2024 pm 05:10 PM
1. First click on the Start menu and select the Settings button in the Start menu. 2. After opening, select time and language settings. 3. Change it to automatically set the time. 4. You can also turn off the automatic time setting and choose the time you want to change. Method 2: 1. Open the [Other Date, Time and Regional Settings] option. 2. Select [Set time and date]. 3. Select [Internet Time] and open [Change Settings Options]. 4. Check [Synchronize with Internet Time Server (S)], click [Update Now], and then click OK.
How to set the clock behind the TikTok label? How to set its tags to attract traffic?
Mar 25, 2024 pm 05:21 PM
As one of the most popular short video platforms in the world, Douyin’s powerful functions and rich gameplay make it difficult for users to put it down. In Douyin, we can add tags to works to increase exposure, and the clock behind the tag will prompt the update time of the content under the tag. So, how to set the clock behind the Douyin label? This article will introduce in detail how to set up Douyin tags and clocks, and how to drive traffic through tags. 1. How to set the clock behind the Douyin label? 1. Open Douyin and click the "Create" button to enter the video editing page. 2. After selecting the materials, click "Next" to enter the work release page. 3. On the work publishing page, fill in the title of the work and click "Add Tag". 4. On the label page, enter the name of the label you want to add.
How to create cool clock and countdown applications using Vue and Canvas
Jul 17, 2023 am 09:48 AM
How to use Vue and Canvas to create cool clock and countdown applications Introduction: In modern web development, with the popularity of the Vue framework and the widespread application of Canvas technology, we can create a variety of breathtaking applications by combining Vue and Canvas animation effects. This article will focus on how to use Vue and Canvas to create cool clock and countdown applications, and provide corresponding code examples for readers to follow and learn. 1. Clock application creates Vue instance and Canvas element first
