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

  • CSS tips

    Time:2021-7-24

    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

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

  • Method and skill of redrawing button into circle in Xaml

    Time:2021-1-24

    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

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

  • C ා define geometry with abstract class

    Time:2020-1-16

    using System;/*using System.Data;*/namespace tx{    abstract class tx    {        public double chang;        public double kuan;        public double r;        public double pai;        public tx(double chang, double kuan)        {            this.chang = chang;            this.kuan = kuan;           /* this.r = r;            this.pai = pai*/;        }        public abstract void mj();    }    class Cfx:tx    {        public Cfx(double chang, double kuan) : base(chang,kuan) […]