• <em id="iiqcg"></em>

    <abbr id="iiqcg"></abbr>

      <blockquote id="iiqcg"><tt id="iiqcg"><option id="iiqcg"></option></tt></blockquote>

        \n    \n        <\/canvas>\n    <\/p>\n<\/body><\/pre>

        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: <\/p>

        \"\"<\/p>

        You can see that the characters of 1 form <\/p>

        Let’s start creating the canvas: <\/p>

        function Clock() {\n        var canvas = document.getElementById(\"canvas\");\n        canvas.width = 600;\n        canvas.height = 100;\n        this.cxt = canvas.getContext('2d');\n        this.cxt.fillStyle=\"#ddd\";\n        this.cxt.fillRect(0, 0, 500, 100);\n    }<\/pre>

        The above code can be The browser draws a small gray canvas<\/p>

        Let’s start the analysis:<\/p>

        1. Understand the data matrix? It is a multi-dimensional array<\/p>

        2. How to draw a circle? <\/strong><\/p>

        2.1 Do you need to know the radius first? <\/p>

        \"\"<\/p>

        It can be seen from the above figure that the positions of the center of the circle are: <\/p>

        r+1\nr+1 + (r+1)*2*1\nr+1 + (r+1)*2*2\n。。。\nr+1 + (r+1)*2*i<\/pre>

        At the same time, the radius can also be obtained by calculating the height of the circle, as follows:<\/p>

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

        canvasHeight = (r+1)*2*10<\/pre>

        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<\/p>

        this.r = 100\/20-1;<\/pre>

        Next, I will add the draw method to the prototype of Clock<\/p>

        Clock.prototype.draw = function(num, index) {\n        this.cxt.fillStyle=\"#000\";\n        for (let i=0; i

        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<\/p>

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

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

        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 <\/p>

        canvas.height= 100<\/pre>

        and you can run the code below, as follows: <\/p>

        var clock = new Clock();\nsetInterval(()=>{\n        clock.getTime();\n    })<\/pre>

        Okay, that’s ok<\/p>\n

        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<\/a>! <\/p>\n

        Related recommendations: <\/p>\n

        php public welfare training video tutorial<\/a><\/p>\n

        HTML5 graphic tutorial<\/a><\/p>\n

        HTML5Online Manual<\/a><\/p>"}

        国产av日韩一区二区三区精品,成人性爱视频在线观看,国产,欧美,日韩,一区,www.成色av久久成人,2222eeee成人天堂

        Home Web Front-end H5 Tutorial Sample code for Html5 canvas to implement particle clock

        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>

        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);
            }

        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

        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

        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;

        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();
                        }
                    }
                }
            }

        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);
                }
            }

        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

        and you can run the code below, as follows:

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

        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

        Hot AI Tools

        Undress AI Tool

        Undress AI Tool

        Undress images for free

        Undresser.AI Undress

        Undresser.AI Undress

        AI-powered app for creating realistic nude photos

        AI Clothes Remover

        AI Clothes Remover

        Online AI tool for removing clothes from photos.

        Clothoff.io

        Clothoff.io

        AI clothes remover

        Video Face Swap

        Video Face Swap

        Swap faces in any video effortlessly with our completely free AI face swap tool!

        Hot Tools

        Notepad++7.3.1

        Notepad++7.3.1

        Easy-to-use and free code editor

        SublimeText3 Chinese version

        SublimeText3 Chinese version

        Chinese version, very easy to use

        Zend Studio 13.0.1

        Zend Studio 13.0.1

        Powerful PHP integrated development environment

        Dreamweaver CS6

        Dreamweaver CS6

        Visual web development tools

        SublimeText3 Mac version

        SublimeText3 Mac version

        God-level code editing software (SublimeText3)

        Hot Topics

        PHP Tutorial
        1488
        72
        Handling reconnections and errors with HTML5 Server-Sent Events. Handling reconnections and errors with HTML5 Server-Sent Events. Jul 03, 2025 am 02:28 AM

        When using HTML5SSE, the methods to deal with reconnection and errors include: 1. Understand the default reconnection mechanism. EventSource retrys 3 seconds after the connection is interrupted by default. You can customize the interval through the retry field; 2. Listen to the error event to deal with connection failure or parsing errors, distinguish error types and execute corresponding logic, such as network problems relying on automatic reconnection, server errors manually delay reconnection, and authentication failure refresh token; 3. Actively control the reconnection logic, such as manually closing and rebuilding the connection, setting the maximum number of retry times, combining navigator.onLine to judge network status to optimize the retry strategy. These measures can improve application stability and user experience.

        Integrating CSS and JavaScript effectively with HTML5 structure. Integrating CSS and JavaScript effectively with HTML5 structure. Jul 12, 2025 am 03:01 AM

        HTML5, CSS and JavaScript should be efficiently combined with semantic tags, reasonable loading order and decoupling design. 1. Use HTML5 semantic tags, such as improving structural clarity and maintainability, which is conducive to SEO and barrier-free access; 2. CSS should be placed in, use external files and split by module to avoid inline styles and delayed loading problems; 3. JavaScript is recommended to be introduced in front, and use defer or async to load asynchronously to avoid blocking rendering; 4. Reduce strong dependence between the three, drive behavior through data-* attributes and class name control status, and improve collaboration efficiency through unified naming specifications. These methods can effectively optimize page performance and collaborate with teams.

        Receiving real-time data with HTML5 Server-Sent Events (SSE). Receiving real-time data with HTML5 Server-Sent Events (SSE). Jul 02, 2025 pm 04:46 PM

        Server-SentEvents (SSE) is a lightweight solution provided by HTML5 to push real-time updates to the browser. It realizes one-way communication through long HTTP connections, which is suitable for stock market, notifications and other scenarios. Create EventSource instance and listen for messages when using: consteventSource=newEventSource('/stream'); eventSource.onmessage=function(event){console.log('Received message:',event.data);}; The server needs to set Content-Type to text/event

        Declaring the correct HTML5 doctype for modern pages. Declaring the correct HTML5 doctype for modern pages. Jul 03, 2025 am 02:35 AM

        Doctype is a statement that tells the browser which HTML standard to use to parse the page. Modern web pages only need to be written at the beginning of the HTML file. Its function is to ensure that the browser renders the page in standard mode rather than weird mode, and must be located on the first line, with no spaces or comments in front of it; there is only one correct way to write it, and it is not recommended to use old versions or other variants; other such as charset, viewport, etc. should be placed in part.

        How to add an image to a canvas using drawImage()? How to add an image to a canvas using drawImage()? Jun 27, 2025 am 02:01 AM

        The key to adding images to Canvas using drawImage() is to call the method correctly and pay attention to the loading time. 1. You must wait until the image is fully loaded before calling drawImage(). Otherwise, it may not be displayed or an error may be reported. You should ensure that the load is completed through the onload callback; 2. DrawImage() has three parameter forms: basic usage (draw a complete picture), size scaling, cropping and drawing; 3. Common problems include image path errors, cross-domain restrictions, and multiple image loading controls. They can be solved by developers' tools to check the path, server configuration CORS, or using Promise.all. Master these key points and use drawImage() smoothly.

        Improving SEO with HTML5 semantic markup and Microdata. Improving SEO with HTML5 semantic markup and Microdata. Jul 03, 2025 am 01:16 AM

        Using HTML5 semantic tags and Microdata can improve SEO because it helps search engines better understand page structure and content meaning. 1. Use HTML5 semantic tags such as,,,, and to clarify the function of page blocks, which helps search engines establish a more accurate page model; 2. Add Microdata structured data to mark specific content, such as article author, release date, product price, etc., so that search engines can identify information types and use them for display of rich media summary; 3. Pay attention to the correct use of tags to avoid confusion, avoid duplicate tags, test the effectiveness of structured data, regularly update to adapt to changes in schema.org, and combine with other SEO means to optimize for long-term.

        Explaining the HTML5 `` vs `` elements. Explaining the HTML5 `` vs `` elements. Jul 12, 2025 am 03:09 AM

        It is a block-level element, suitable for layout; it is an inline element, suitable for wrapping text content. 1. Exclusively occupy a line, width, height and margins can be set, which are often used in structural layout; 2. No line breaks, the size is determined by the content, and is suitable for local text styles or dynamic operations; 3. When choosing, it should be judged based on whether the content needs independent space; 4. It cannot be nested and is not suitable for layout; 5. Priority is given to the use of semantic labels to improve structural clarity and accessibility.

        Getting the user's current location with the HTML5 Geolocation API. Getting the user's current location with the HTML5 Geolocation API. Jul 02, 2025 pm 05:03 PM

        When using HTML5Geolocation API to obtain user location, you must first obtain user authorization, and request and explain the purpose at the right time; the basic method is navigator.geolocation.getCurrentPosition(), which contains successful callbacks, wrong callbacks and configuration parameters; common reasons for failure include permission denied, browser not supported, network problems, etc., alternative solutions and clear prompts should be provided. The specific suggestions are as follows: 1. Request permissions when the user operation is triggered, such as clicking the button; 2. Use enableHighAccuracy, timeout, maximumAge and other parameters to optimize the positioning effect; 3. Error handling should distinguish between different errors

        See all articles