JS+Canvas realizes dynamic clock effect
|
A dynamic clock demo based on Canvas is provided for your reference. The specific contents are as follows
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Dynamic Clock</title>
<script type="text/javascript" src="js/lattice.js"></script>
<script type="text/javascript" src="js/script.js"></script>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
#canvasBox{
border-width: 2px;
border-color: black;
border-style: solid;
width: 80%;
margin: 0 auto;
}
</style>
</head>
<body>
<!-- Put the canvas in a box and use the box to control the position of the canvas-->
<div id="canvasBox">
<canvas id="canvas">
This browser does not support canvas
</canvas>
</div>
</body>
</html>lattice.js
lattice =
[
[
[0,0,1,1,1,0,0],
[0,1,1,0,1,1,0],
[1,1,0,0,0,1,1],
[1,1,0,0,0,1,1],
[1,1,0,0,0,1,1],
[1,1,0,0,0,1,1],
[1,1,0,0,0,1,1],
[1,1,0,0,0,1,1],
[0,1,1,0,1,1,0],
[0,0,1,1,1,0,0]
],//0
[
[0,0,0,1,1,0,0],
[0,1,1,1,1,0,0],
[0,0,0,1,1,0,0],
[0,0,0,1,1,0,0],
[0,0,0,1,1,0,0],
[0,0,0,1,1,0,0],
[0,0,0,1,1,0,0],
[0,0,0,1,1,0,0],
[0,0,0,1,1,0,0],
[1,1,1,1,1,1,1]
],//1
[
[0,1,1,1,1,1,0],
[1,1,0,0,0,1,1],
[0,0,0,0,0,1,1],
[0,0,0,0,1,1,0],
[0,0,0,1,1,0,0],
[0,0,1,1,0,0,0],
[0,1,1,0,0,0,0],
[1,1,0,0,0,0,0],
[1,1,0,0,0,1,1],
[1,1,1,1,1,1,1]
],//2
[
[1,1,1,1,1,1,1],
[0,0,0,0,0,1,1],
[0,0,0,0,1,1,0],
[0,0,0,1,1,0,0],
[0,0,1,1,1,0,0],
[0,0,0,0,1,1,0],
[0,0,0,0,0,1,1],
[0,0,0,0,0,1,1],
[1,1,0,0,0,1,1],
[0,1,1,1,1,1,0]
],//3
[
[0,0,0,0,1,1,0],
[0,0,0,1,1,1,0],
[0,0,1,1,1,1,0],
[0,1,1,0,1,1,0],
[1,1,0,0,1,1,0],
[1,1,1,1,1,1,1],
[0,0,0,0,1,1,0],
[0,0,0,0,1,1,0],
[0,0,0,0,1,1,0],
[0,0,0,1,1,1,1]
],//4
[
[1,1,1,1,1,1,1],
[1,1,0,0,0,0,0],
[1,1,0,0,0,0,0],
[1,1,1,1,1,1,0],
[0,0,0,0,0,1,1],
[0,0,0,0,0,1,1],
[0,0,0,0,0,1,1],
[0,0,0,0,0,1,1],
[1,1,0,0,0,1,1],
[0,1,1,1,1,1,0]
],//5
[
[0,0,0,0,1,1,0],
[0,0,1,1,0,0,0],
[0,1,1,0,0,0,0],
[1,1,0,0,0,0,0],
[1,1,0,1,1,1,0],
[1,1,0,0,0,1,1],
[1,1,0,0,0,1,1],
[1,1,0,0,0,1,1],
[1,1,0,0,0,1,1],
[0,1,1,1,1,1,0]
],//6
[
[1,1,1,1,1,1,1],
[1,1,0,0,0,1,1],
[0,0,0,0,1,1,0],
[0,0,0,0,1,1,0],
[0,0,0,1,1,0,0],
[0,0,0,1,1,0,0],
[0,0,1,1,0,0,0],
[0,0,1,1,0,0,0],
[0,0,1,1,0,0,0],
[0,0,1,1,0,0,0]
],//7
[
[0,1,1,1,1,1,0],
[1,1,0,0,0,1,1],
[1,1,0,0,0,1,1],
[1,1,0,0,0,1,1],
[0,1,1,1,1,1,0],
[1,1,0,0,0,1,1],
[1,1,0,0,0,1,1],
[1,1,0,0,0,1,1],
[1,1,0,0,0,1,1],
[0,1,1,1,1,1,0]
],//8
[
[0,1,1,1,1,1,0],
[1,1,0,0,0,1,1],
[1,1,0,0,0,1,1],
[1,1,0,0,0,1,1],
[0,1,1,1,0,1,1],
[0,0,0,0,0,1,1],
[0,0,0,0,0,1,1],
[0,0,0,0,1,1,0],
[0,0,0,1,1,0,0],
[0,1,1,0,0,0,0]
],//9
[
[0,0,0,0],
[0,0,0,0],
[0,1,1,0],
[0,1,1,0],
[0,0,0,0],
[0,0,0,0],
[0,1,1,0],
[0,1,1,0],
[0,0,0,0],
[0,0,0,0]
]//:
];script.js
var CANVAS_WIDTH;
var CANVAS_HEIGHT = 600;
//Set the radius of the circle in the dot matrix var RADIUS = 8;
//Set the position of the clock from the border var MARGIN_LEFT = 100;
var MARGIN_TOP = 40;
//Get the initial state time var time = new Date();
var hours = time.getHours();
var minutes = time.getMinutes();
var seconds = time.getSeconds();
//Used to store ball objects var balls = [];
//Ball color var colors = ["red","orenge","yellow","green","blue","purple","pink"]
window.onload = function(){
//Get the width of the canvas's outer box to make the canvas the same width as the outer box var canvasBox = document.getElementById("canvasBox");
var boxWidth = getComputedStyle(canvasBox,null);
CANVAS_WIDTH = parseInt(boxWidth.width);
//Set canvas width and height and get brush object var canvas = document.getElementById("canvas");
canvas.width = CANVAS_WIDTH;
canvas.height = CANVAS_HEIGHT;
var context = canvas.getContext("2d");
//Timed call, call once every 50 milliseconds setInterval(function(){
//Drawing function draw(context);
},50);
function draw(ctx){
//Refresh the screen ctx.clearRect(0,0,CANVAS_WIDTH,CANVAS_HEIGHT);
//Get the current time var curTime = new Date();
var curHours = curTime.getHours();
var curMinutes = curTime.getMinutes();
var curSeconds = curTime.getSeconds();
//Draw hours drawLattice(MARGIN_LEFT,MARGIN_TOP,parseInt(curHours/10),ctx);
drawLattice(MARGIN_LEFT+15*(RADIUS+1),MARGIN_TOP,parseInt(curHours%10),ctx);
//Draw the colon drawLattice(MARGIN_LEFT+30*(RADIUS+1),MARGIN_TOP,10,ctx);
//Draw minutes drawLattice(MARGIN_LEFT+39*(RADIUS+1),MARGIN_TOP,parseInt(curMinutes/10),ctx);
drawLattice(MARGIN_LEFT+54*(RADIUS+1),MARGIN_TOP,parseInt(curMinutes%10),ctx);
//Draw the colon drawLattice(MARGIN_LEFT+69*(RADIUS+1),MARGIN_TOP,10,ctx);
//Draw seconds drawLattice(MARGIN_LEFT+78*(RADIUS+1),MARGIN_TOP,parseInt(curSeconds/10),ctx);
drawLattice(MARGIN_LEFT+93*(RADIUS+1),MARGIN_TOP,parseInt(curSeconds%10),ctx);
//Update the time and draw the ball update(context,curHours,curMinutes,curSeconds);
//Observe the number of balls//console.log(balls.length);
}
//parameter:
//x: draw the horizontal coordinate of the upper left corner of the digital lattice //y: draw the vertical coordinate of the upper left corner of the digital lattice //num: the number to be drawn, actually the index of the lattice, 10 represents the colon //ctx: brush function drawLattice(x,y,num,ctx){
for(var i=0;i<lattice[num].length;i++){
for(var j=0;j<lattice[num][i].length;j++){
if(lattice[num][i][j]==1){
ctx.beginPath();
ctx.fillStyle = "blue";
ctx.arc(x+j*2*(RADIUS+1)+(RADIUS+1),y+i*2*(RADIUS+1)+(RADIUS+1),RADIUS,0,2*Math.PI);
ctx.fill();
ctx.closePath();
}
}
}
}
//Update time and draw the ball function update(ctx,curHours,curMinutes,curSeconds){
if (seconds!=curSeconds) {
//Update hoursif(parseInt(curHours/10)!=parseInt(hours/10)){
addBalls(MARGIN_LEFT,MARGIN_TOP,parseInt(curHours/10));
}
if (parseInt(curHours%10)!=parseInt(hours%10)){
addBalls(MARGIN_LEFT+15*(RADIUS+1),MARGIN_TOP,parseInt(curHours%10));
}
//Update minutesif(parseInt(curMinutes/10)!=parseInt(minutes/10)){
addBalls(MARGIN_LEFT+39*(RADIUS+1),MARGIN_TOP,parseInt(curMinutes/10));
}
if (parseInt(curMinutes%10)!=parseInt(minutes%10)){
addBalls(MARGIN_LEFT+54*(RADIUS+1),MARGIN_TOP,parseInt(curMinutes%10));
}
//Update seconds if(parseInt(curSeconds/10)!=parseInt(seconds/10)){
addBalls(MARGIN_LEFT+78*(RADIUS+1),MARGIN_TOP,parseInt(curSeconds/10));
}
if (parseInt(curSeconds%10)!=parseInt(seconds%10)){
addBalls(MARGIN_LEFT+93*(RADIUS+1),MARGIN_TOP,parseInt(curSeconds%10));
}
//Update all times hours = curHours;
minutes = curMinutes;
seconds = curSeconds;
}
//Draw the balls drawBalls(ctx);
//Update the ball movement updateBalls();
}
//Add a single ball//Parameters:
//x: the horizontal coordinate of the ball //y: the vertical coordinate of the ball //num: the changing time number function addBalls(x,y,num){
for(var i=0;i<lattice[num].length;i++){
for(var j=0;j<lattice[num][i].length;j++){
if(lattice[num][i][j]==1){
//Add a small ball object var ball = {
//Coordinate x:x+j*2*(RADIUS+1)+(RADIUS+1),
y:y+i*2*(RADIUS+1)+(RADIUS+1),
// Gravitational acceleration g:1.5+Math.random(),
//x, y direction speed vx:Math.pow(-1,Math.ceil(Math.random()*1000))*5,
vy:-5,
//Ball color color: colors[Math.floor(Math.random()*colors.length)]
}
//Add the ball to the storage queue balls.push(ball);
}
}
}
}
//Draw the ball function drawBalls(ctx){
for(var i=0;i<balls.length;i++){
ctx.beginPath();
ctx.fillStyle = balls[i].color;
ctx.arc(balls[i].x,balls[i].y,RADIUS,0,2*Math.PI,true);
ctx.fill();
ctx.closePath();
}
}
//Update the ball movement function updateBalls(){
//Update the dynamics of the balls in the storage array for(var i=0;i<balls.length;i++){
balls[i].x += balls[i].vx;
balls[i].y += balls[i].vy;
balls[i].vy += balls[i].g;
//Edge collision detection if(balls[i].y>=CANVAS_HEIGHT-RADIUS){
balls[i].y=CANVAS_HEIGHT-RADIUS;
//Simulate collision rebound and resistance balls[i].vy=-balls[i].vy*0.6;
}
}
//When the ball rolls out of the canvas, it can be deleted from the array. The following is the deletion algorithm //Store the number of balls that should be retained var numBall = 0;
for(var i=0;i<balls.length;i++){
if(balls[i].x+RADIUS>0&&balls[i].x-RADIUS<CANVAS_WIDTH){
//If the current ball is judged to be on the screen, move the ball as far forward as possible. After each loop, the ball at the end of the array is the ball that rolls out of the canvas balls[numBall] = balls[i];
numBall++;
}
}
//Delete the ball from the back of the array while (balls.length>numBall) {
balls.pop();
}
}
};Effect picture:
The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM. You may also be interested in:
|
<<: XHTML tags should be used properly
>>: Detailed explanation of mysql user variables and set statement examples
Recommend
Tips for implementing multiple borders in CSS
1. Multiple borders[1] Background: box-shadow, ou...
Steps to install MySQL using Docker under Linux
As a tester, you may often need to install some s...
HTML Basics: The basic structure of HTML
The basic structure of HTML hypertext documents is...
Detailed explanation of docker version es, milvus, minio startup commands
1. es startup command: docker run -itd -e TAKE_FI...
MySQL 5.7.20\5.7.21 free installation version installation and configuration tutorial
mysql download, install and configure 5.7.20 / 5....
About the problem of writing plugins for mounting DOM in vue3
Compared with vue2, vue3 has an additional concep...
Install Docker for Windows on Windows 10 Home Edition
0. Background Hardware: Xiaomi Notebook Air 13/In...
A brief discussion on the understanding of TypeScript index signatures
Table of contents 1. What is an index signature? ...
Vue implements Modal component based on Teleport
Table of contents 1. Get to know Teleport 2. Basi...
Detailed explanation of the basic implementation principle of MySQL DISTINCT
Preface DISTINCT is actually very similar to the ...
MySQL table field time setting default value
Application Scenario In the data table, the appli...
A brief discussion on docker-compose network settings
Networks usage tutorial Official website docker-c...
Steps to purchase a cloud server and install the Pagoda Panel on Alibaba Cloud
Alibaba Cloud purchases servers Purchase a cloud ...
How to print highlighted code in nodejs console
Preface When the code runs and an error occurs, w...
Detailed explanation of the application of CSS Sprite
CSS Sprite, also known as CSS Sprite, is an image...