Tag：canvas
-
Time：2021-10-27
Draw a pie chart with HTML5 canvas. Let’s start!Step 1: set the width and height of the canvas const canvas = document.getElementById(“canvas”); const context = canvas.getContext(“2d”); //Sets the width and height of the canvas canvas.width = 831; canvas.height = 706; Step 2: transform the coordinate origin to the center of the canvas function translate(context) { […]
-
Time：2021-10-27
1. Content type of HTML5 Content type describe Embedded Add other types of content to the document, such as audio, video, canvas, iframe, and so on flow Elements used in documents and application bodies, such as form, H1, and small title Paragraph headings, such as H1, H2, hgroup, etc interactive Content that interacts with users, […]
-
Time：2021-10-26
H5API New HTML5 features Tag: NAV article footer header aside New feature of the form: the value of input type is date time week email number Form attribute form Formaction from method required readonly disabled Form control label: progress meter datalist 1. H5api (JS part in HTML5) Before the advent of HTML5, to display video, […]
-
Time：2021-10-24
preface You may see a lot about moving pictures and rectangles in canvas. But why should I write such an article, because the author once moved under three-dimensional graphics. It includes moving an edge line, a face and a point of a polygon on a cube. I’ve been writing about canvas recently. I want to […]
-
Time：2021-10-23
//Dynamic dimension const dynamicDateSize = function (size) { //return (document.body.offsetWidth / 375) * size; return (getClientW() / 375) * size } export function addWaterBack(text) { const width = window.screen.width || document.body.offsetWidth; const height = window.screen.height || document.body.clientHeight; let selector = document.querySelector(“body”); let section = document.createElement(“section”); const styleStr = ` position: fixed; width: 100%; height: 100%; […]
-
Time：2021-10-22
Modern web applications have a great demand for images, which occupy most of the bytes downloaded from the network. By optimizing them, you can make better use of their performance. If you happen to use geometry as a background image, there is an alternative: you can useCSS Paint APIGenerate the background programmatically. In this tutorial, […]
-
Time：2021-10-21
order record one Overview… 1 two Presentation information… 2 three Application process… 2 one summary Standardized modeling has been formed for the data of some industries, or some companies focus on a certain field and need to reuse the development business. Previous versions and articles introduced the combination of […]
-
Time：2021-10-18
demonstration: Video presentation get ready: 1. Follow Dali’s log, download the editor or directly use the online editor 2. Download pictures 3. Start 3.1 load pictures and create canvas function preload() { img = loadImage(‘bird.png’); } function setup() {createCanvas(400,400);// Create a 400 * 400 canvas }3.2 create background and draw bird picturesvar x=0,y=0;// Bird coordinates […]
-
Time：2021-10-15
1、 Problems or doubts encountered in use This part mainly explains some strange phenomena that users may feel, explains the reasons for such design, and includes descriptions of some possible bugs. Does data change trigger page refresh immediately? As a result, data changes do trigger data changes immediately. Then, if we have a statement similar […]
-
Time：2021-10-8
Follow the mouse colorful ball Canvas didn’t disappoint me. It’s really interesting Realization effect Super cool Implementation principle Create a ball Add random color to the ball, random radius Move the mouse and add a small ball through instantiation The animation effect of the small ball is realized by calling the new method added to […]
-
Time：2021-10-6
The moon shines back on the lake, and wild cranes rush to the idle clouds preface Yesterday was Valentine’s day. Compared with everyone, I had a very happy holiday ~ me too Well, no more nonsense. It’s a very interesting project for you today. You can get 10000 blocks by cutting the target picture. Use […]
-
Time：2021-10-4
Introduction This article is a continuation of the previous oneI combined our beautiful moments with 10000 picturesFabric Teaching OK, let’s start today’s topic:When we want to draw a basic simple shape on the canvas, using canvas won’t feel cumbersome. However, when any form of interaction is required on the canvas, drawing complex graphics and changing […]
