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
Quickly master the use of Docker to build a development environment
As the platform continues to grow, the project...
CentOS7 enables MySQL8 master-slave backup and daily scheduled full backup (recommended)
Note 1: Solve the problem of slow connection to M...
HTML weight loss Streamline HTML tags to create web pages
HTML 4 HTML (not XHTML), MIME type is text/html, ...
Detailed explanation of where Docker saves log files
Table of contents Where are the logs stored? View...
MySQL Error 1290 (HY000) Solution
I struggled with a problem for a long time and re...
How to install and configure the supervisor daemon under centos7
Newbie, record it yourself 1. Install supervisor....
Implementation of CSS circular hollowing (coupon background image)
This article mainly introduces CSS circular hollo...
Detailed explanation of crontab scheduled execution command under Linux
In LINUX, periodic tasks are usually handled by t...
Three ways to share component logic in React
Without further ado, these three methods are: ren...
What are the advantages of using B+Tree as an index in MySQL?
Table of contents Why do databases need indexes? ...
In IIS 7.5, HTML supports the include function like SHTML (add module mapping)
When I first started, I found a lot of errors. In...
How to remove the blue box that appears when the image is used as a hyperlink
I recently used Dreamweaver to make a product pres...
docker-maven-plugin packages the image and uploads it to a private warehouse
Table of contents 1. Introduction to docker-maven...
How to change the database data storage directory in MySQL
Preface The default database file of the MySQL da...
How to solve the problem of installing VMware tools under VMware and the installation file not appearing
VMware tools provides great convenience for using...