• ## Dashboard canvas

Time：2021-10-21

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

Time：2021-8-11

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 […]

• ## Drawing circular polygon pattern based on HTML5

Time：2021-7-9

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

Time：2021-6-14

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

Time：2021-4-26

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

Time：2021-4-23

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

Time：2021-4-7

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

Time：2021-3-8

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 […]

• ## Vue uses canvas to draw arc progress bar

Time：2020-12-25

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

Time：2020-10-30

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 […]