Tag:canvas

  • Example of JavaScript Animation: derivation of dots

    Time:2020-10-26

    Consider the following curve equation:           R=S*sqrt(n)           α=n*θ           X=R*SIN(α)           Y=R*COS(α)     Where s and θ can specify a fixed value. Take a total of 1000 values from 0 to 999 for N cycle. For each n, a coordinate value (x, y) is obtained according to the given coordinate equation. Then a circle with […]

  • Canvas riding the wind and waves

    Time:2020-10-23

    The main contents of this article are as follows Basic knowledge of canvas What is canvas? Canvas is a new element in HTML5, which can be used to draw graphics through scripts in JavaScript; for example, it can be used to draw graphics and create animations. Canvas was first introduced into WebKit by apple; We […]

  • Canvas draws a cone

    Time:2020-10-16

    I can’t find it online, so I can only draw and study; <html> <head> < title > my first HTML page < / Title > </head> <body> <canvas id=’cvs’ width=’1000′ height=”800″> </canvas> <script> const cvs =document.getElementById(‘cvs’); //Calculate the width of the canvas const width = cvs.offsetWidth; //Calculate the height of the canvas const height = […]

  • How to create and download invitation cards

    Time:2020-10-15

    1. Preface Having written a lot of JavaScript and CSS3 articles, it’s time to write a canvas. Canvas is a new feature provided by HTML5! As for the function, it is a canvas. Then the brush is JavaScript. Canvas is widely used, especially in HTML5 games and data visualization. Now canvas gives me the same […]

  • Example code of canvas wave wreath

    Time:2020-10-15

    Canvas animation in JS I haven’t written a blog for a few days. I’m very busy today. Let’s make a wave wreath     The effect picture is as follows: The old rule first gives the code to you, creates an HTML document (creates a TXT text document, changes the suffix name to “. HTML””), […]

  • Matplotlib for Python data visualization

    Time:2020-10-14

    1、 Common module import import numpy as np import matplotlib import matplotlib.mlab as mlab import matplotlib.pyplot as plt import matplotlib.font_manager as fm from mpl_toolkits.mplot3d import Axes3D 2、 Solve the problem of abnormal display Chinese random code myfont = fm.FontProperties (fname = font file path) The negative sign is shown as a square matplotlib.rcParams[‘axes.unicode_minus’]=False 3、 Line […]

  • JavaScript animation example: exploding ball

    Time:2020-10-13

    1. Exploding balls Define a ball object class ball, which has six attributes: center coordinate (x, y), radius of the ball, fill color color, horizontal change of the center coordinate speedx, and vertical change of the center coordinate speedy. The ball class defines two methods: draw() to draw the ball and update() to change the […]

  • What you didn’t notice in the introduction to canvas

    Time:2020-10-11

    preface This article was written at the end of July. I sorted it out without working overtime. Some very basic knowledge is worth reading for those who have just started canvas. Let’s start with a rainbow Compared with reading a variety of articles, I prefer the logic in mathematics; compared with learning a variety of […]

  • How to use canvas drawing image

    Time:2020-9-26

    It has to be said that the canvas in HTML5 is really powerful. From image processing to video processing, to game development, we can see the shadow of canvas. However, this is the only one<canvas>Tags are so powerful, which is mainly due to the powerful API of canvas. It is also because of so many […]

  • Watermark the image and tile it

    Time:2020-9-15

    Today, I met a demand. I added a watermark to the picture and tiled it. After collecting it on the Internet for a long time, I found that it was not reliable. I made one by myself. The effect has been achieved. I hope you can correct me if there is something wrong <img style=”display:none;”> […]

  • Realization of drawing tree structure visual graph by canvas

    Time:2020-9-15

    As shown in the figure below, a tree structure visualization data graph is needed in recent projects. Many visual plug-ins were found, but no available ones were found. So I drew one myself. The code is as follows. The tree branch is the data rendering returned by the back-end interface, which can display multiple data; […]

  • Apiccloud developer’s way to advance | JS uses H5’s canvas to operate wechat browser to upload images and rotate

    Time:2020-9-11

    Project background: WeChat official account does not want to upload WeChat JS-SDK images.It is found that in some models, wechat built-in browser and van upload component will rotate the selected images Solution: use H5 canvas tag to operate image rotationThe code annotation is incomplete. The logic is to select the picture = > read the […]