• Dashboard canvas


    The effect is as follows: The source code is as follows. You can preview it by directly copying and saving it as an HTML file: <!DOCTYPE html> <html lang=”en”> <head> <meta charset=”UTF-8″> <meta name=”viewport” content=”width=device-width, initial-scale=1.0″> <title>Document</title> </head> <body> <canvas id=”canvas” width=”300″ height=”300″> <p>Sorry, your browser does not support canvas</p> </canvas> <script> /** *Generate circular […]

  • A tutorial on drawing arcs and circles through HTML5 canvas API


    In HTML5, the canvasrenderingcontext2d object also provides a special method for drawing circles or arcs. Please refer to the following properties and methods: JavaScript CodeCopy contents to clipboard arc(x, y, radius, startRad, endRad, anticlockwise)   Draw an arc on a circle with coordinate point (x, y) as the center and radius as radius on canvas. The starting radian of this arc […]

  • CSS tips


    Knowledge point 1: Transform: translate (- 50%, – 50%) scale (1.5) In the state of position: fixed, set the transform to – 50% horizontally and vertically, and both top and left are 0Scale (1.5) is the current box from 1 to 1.5. It is used for special effects Knowledge point 2: pointer events: None To […]

  • Drawing circular polygon pattern based on HTML5


    Let’s first look at the simplest rendering: The code is as follows: JavaScript CodeCopy content to clipboard var canvas = document.getElementById(‘my’), ctx = canvas.getContext(‘2d’);      setInterval(function(){        ctx.clearRect(0,0,400,400);        ctx.save();        ctx.translate(200,200);        var ci =90, pi = Math.PI / ci, x1 = 100, y1 =0, x2 =0, y2 =0, x3 =0, y3 =0;        ctx.beginPath();        for(var i = ci *2; i >0; i–){          ctx.rotate(pi);          ctx.moveTo(x1,y1);          y2 = x1 * Math.sin(pi);          x2 = x1 * Math.cos(pi);          x3 = (x1 – x2) /2+ x2 +10+ Math.random() *20;          y3 = y2 /2;          ctx.lineTo(x3,y3);          ctx.lineTo(x2,y2);        }        ctx.stroke();        ctx.restore();    […]

  • Using canvas to achieve interactive circular mosaic effect


    When looking at D3. JS, I came across aexampleI think it’s very interesting, like a circular mosaic that will split. Look at the code, using SVG to complete, but the specific implementation makes it impossible to play in the mobile terminal, so I implemented a version of canvas. Code is very simple, canvas beginners can […]

  • Kotlin round progress bar


    Custom round progress bar of kotlin version Most start-up pages have a progress bar loading style, so I rewrite it with kotlin. If it’s really cool, there are still many things to add A simple progress bar is basically composed of a background ring and a progress ring. What we need to pay attention to […]

  • HTML5 canvas drawing rectangle and circle instance code


    HTML5 canvas drawing rectangle and circle instance code JavaScript CodeCopy content to clipboard <!DOCTYPE html>    <html>        <head>            <meta charset=“UTF-8”>            <title></title>        </head>        <body onload=“draw(),drawarc()”>    <! — drawing steps: get canvas element, get context, fill and draw border, set drawing style <! — to draw other complex graphics, you need to use paths: […]

  • Thingjs teaches you to create a polygon area that can’t escape


    Maybe fate is a closed curve walking, no matter how to walk is a polygon. Thingjs teaches you to create a polygon area that can’t escape. JS syntax is super simple. Rectangular and circular areas are easy to draw. Most modeling tools can drag and drop to generate them directly, but the polygon area needs […]

  • The animation effect of “peacock opens the screen” by flutter


    Lao Meng‘s Guide: today we share an animation effect similar to “peacock opens the screen”. When opening a new page, the new page will gradually open from the top right corner of the screen to the full screen. Let’s look at the specific effect first I don’t know the name of this effect? If you […]

  • Method and skill of redrawing button into circle in Xaml


    When using XAML layout, sometimes in order to make the interface metro, some buttons need to use the circle instead of the default rectangle. The following button styles can solve this problem and can be modified according to your own needs. Of course, if you are familiar with bland, you can directly use it to […]

  • Vue uses canvas to draw arc progress bar


    After a few words, let’s go to the effect drawing first, and then look down if it meets the requirementsThis is a small function of youzan mall.Paste the method directly, and then call the method directly to transfer the value. html: <canvas id=”circle” class=”circle-item” width=”240px” height=”240px” > </canvas> script: mounted() { this.toCanvas(“circle”, 70); //The first […]

  • IOS memo


    Years ago, during the new year period, the company’s project time was tight and very busy. In addition, I was working on a small IOS project, so I didn’t have a rest during the off-duty and weekend time, so the blog was slack. Here’s a little summary of some of the code I used to […]