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
Detailed explanation of the principle of js Proxy
Table of contents What is Proxy Mode? Introducing...
A brief discussion on using virtual lists to optimize tables in el-table
Table of contents Preface Solution Specific imple...
How to configure https for nginx in docker
Websites without https support will gradually be ...
How to quickly paginate MySQL data volumes of tens of millions
Preface In backend development, in order to preve...
How to query the intersection of time periods in Mysql
Mysql query time period intersection Usage scenar...
How to solve the problem of installing VMware tools under VMware and the installation file not appearing
VMware tools provides great convenience for using...
Detailed explanation of how to view the current number of MySQL connections
1. View the detailed information of all current c...
A brief discussion on VUE uni-app's commonly used APIs
Table of contents 1. Routing and page jump 2. Int...
30 excellent examples of color matching in web design
Today, this article has collected 30 excellent cas...
MySQL installation and configuration tutorial for Mac
This article shares the MySQL installation tutori...
Summary of using the reduce() method in JS
Table of contents 1. Grammar 2. Examples 3. Other...
Lambda expression principles and examples
Lambda Expressions Lambda expressions, also known...
Summary of 10 advanced tips for Vue Router
Preface Vue Router is the official routing manage...
How to use async and await correctly in JS loops
Table of contents Overview (Loop Mode - Common) D...
Ubuntu Server Installation Tutorial in Vmware
This article shares with you the Ubuntu server ve...