Sample code for Html5 canvas to implement particle clock-H5 Tutorial-php.cn

Home

Web Front-end

H5 Tutorial

Sample code for Html5 canvas to implement particle clock

青灯夜游

Oct 09, 2018 pm 03:38 PM

canvas html5

This article mainly introduces the sample code of Html5 canvas to implement particle clock. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

Let’s first look at the effect of the particle clock, as follows:

Next we will implement it through canvas and js,

First we need to create An html file and add a canvas canvas, as follows:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .container{
            margin: 0, auto;
            width: 600px;
            
        }
    </style>
</head>
<body>
    <p id="container">
        <canvas id="canvas"></canvas>
    </p>
</body>

Copy after login

Import the material below, digit.js. The materials are composed of numbers through a two-dimensional array. There are a total of: 0-9 and colon, ten characters. As follows:

You can see that the characters of 1 form

Let’s start creating the canvas:

function Clock() {
        var canvas = document.getElementById("canvas");
        canvas.width = 600;
        canvas.height = 100;
        this.cxt = canvas.getContext(&#39;2d&#39;);
        this.cxt.fillStyle="#ddd";
        this.cxt.fillRect(0, 0, 500, 100);
    }

Copy after login

The above code can be The browser draws a small gray canvas

Let’s start the analysis:

1. Understand the data matrix? It is a multi-dimensional array

2. How to draw a circle?

2.1 Do you need to know the radius first?

It can be seen from the above figure that the positions of the center of the circle are:

r+1
r+1 + (r+1)*2*1
r+1 + (r+1)*2*2
。。。
r+1 + (r+1)*2*i

Copy after login

At the same time, the radius can also be obtained by calculating the height of the circle, as follows:

The height of a circle is (r 1)*2, and the height of the canvas is composed of 10 circles.

canvasHeight = (r+1)*2*10

Copy after login

If the height of the canvas is set to 100, then r will come out, and the center xy of the circle will also come out. Now, let’s start drawing a circle.
First, add a statement to the Clock object above to calculate r

this.r = 100/20-1;

Copy after login

Next, I will add the draw method to the prototype of Clock

Clock.prototype.draw = function(num, index) {
        this.cxt.fillStyle="#000";
        for (let i=0; i<digit[num].length; i++) {
            for (let j=0; j<digit[num][i].length; j++) {
                if (digit[num][i][j] == 1) {
                    this.cxt.beginPath();
                    this.cxt.arc(index*70+(this.r+1)+(this.r+1)*2*j, (this.r+1)+(this.r+1)*2*i, this.r, 0, Math.PI*2, false);
                    this.cxt.closePath();
                    this.cxt.fill();
                }
            }
        }
    }

Copy after login

draw reception 2 parameters, the first is the character index, the second is the character offset sequence, 70 is an offset distance, which can be customized.
The first for gets the character array to be rendered. The second for takes each line for rendering and only renders it as 1. The parameters for drawing a circle are mainly x, y, r

The next step is to get the time. We can directly get the time from new Date using regular expressions, as follows:

Clock.prototype.getTime = function() {
        var reg = /(\d)(\d):(\d)(\d):(\d)(\d)/.exec(new Date());
        var data = [];
        data.push(reg[1], reg[2], 10, reg[3], reg[4], 10, reg[5], reg[6]);
        for (var i=0; i<data.length; i++) {
            this.draw(data[i], i);
        }
    }

Copy after login

You can easily get the hours, minutes and seconds through regular expressions. Pay attention to the corresponding format when pushing the array, where 10 represents digit. The 10th character in js, that is, the colon
. Note that there will be a problem with drawing like this, that is, the canvas cannot be refreshed. You can add this

canvas.height= 100

Copy after login

and you can run the code below, as follows:

var clock = new Clock();
setInterval(()=>{
        clock.getTime();
    })

Copy after login

Okay, that’s ok

Summary: The above is the entire content of this article, I hope it will be helpful to everyone’s study. For more related tutorials, please visit Html5 Video Tutorial!

Related recommendations:

php public welfare training video tutorial

HTML5 graphic tutorial

HTML5Online Manual

The above is the detailed content of Sample code for Html5 canvas to implement particle clock. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn