Tag:canvas

  • Canvas drawing pie chart

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

  • Sort out some new features of HTML5 and common properties of canvas

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

  • H5API

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

  • Moving rectangle (point, line and surface) with canvas (1)

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

  • Add watermark to canvas

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

  • How to use CSS paint API to dynamically create resolution independent variable background

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

  • Ineuos industrial interconnection operating system, charts and data points are combined into new components for project reuse

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

  • Creative game programming lesson 2 keyboard controls the movement of birds

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

  • Graphic framework cluster FAQ

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

  • Implementation of canvas following mouse colorful ball

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

  • I combined our beautiful moments with 10000 pictures

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

  • Every little friend who uses canvas should know about fabric.js

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