Tag:canvas

  • Example of realizing canvas shadow effect with HTML5

    Time:2022-5-6

    Realize canvas shadow effect in HTML5 Copy code The code is as follows: <!DOCTYPE html><html><head><meta http-equiv=”X-UA-Compatible” content=”chrome=IE8″><meta http-equiv=”Content-type” content=”text/html;charset=UTF-8″><title>Canvas Clip Demo</title><link href=”default.css” rel=”stylesheet” /> <script> var ctx = null; // global variable 2d context var imageTexture = null; window.onload = function() { var canvas = document.getElementById(“text_canvas”); console.log(canvas.parentNode.clientWidth); canvas.width = canvas.parentNode.clientWidth; canvas.height = canvas.parentNode.clientHeight; if (!canvas.getContext) […]

  • An example of creating a space game using HTML5 canvas

    Time:2022-5-2

    HTML5 canvas can quickly create lightweight images that are helpful for game development. This section explains how to use canvas to create a nostalgic style outer space flight game that will run on the web page. This game is designed to show the basic principles of developing web games using canvas function. The goal of […]

  • JS canvas interface and animation effects

    Time:2022-4-29

    catalogue summary Canvas API: drawing graphics route Line type rectangle Arc text Gradient and image fill shadow Canvas API: image processing CanvasRenderingContext2D.drawImage() Pixel read / write CanvasRenderingContext2D.save(),CanvasRenderingContext2D.restore() CanvasRenderingContext2D.canvas Image transformation Method of canvas element htmlCanvasElement.toDataURL() htmlCanvasElement.toBlob() Canvas usage example Animation effect Pixel processing summary The < canvas > element is used to generate images. It […]

  • Python turtle draws seven segment nixie tubes and 14 segment nixie tubes to display letters and time

    Time:2022-4-28

    import datetimeimport turtlename = []Def drawLine (draw): # draw single segment nixie tube turtle.pendown() if draw else turtle.penup() turtle.fd(40) turtle.right(90) Def DrawLine1 (draw): # draw single segment nixie tube 1 turtle.pendown() if draw else turtle.penup() turtle.fd(20) Def drawtdown1 (draw): # slash turtle.pendown() if draw else turtle.penup() turtle.fd(44.7) Def drawdigital (digital): # draw seven digital tubes […]

  • Rose effect drawn by HTML5 canvas

    Time:2022-4-22

    Someone wrote a beautiful rose in HTML. Is it a little too coquettish. Pure JavaScipt makes roses, which once again shows the power of HTML5Warning: it is said that the IE6 kernel cannot be seen. It is recommended to use chrome or Firefox. Rose effect: Implementation code: Copy code The code is as follows: <!doctype […]

  • [unity3d] the font size is adjusted to the maximum value, which is still very small / the canvas aspect ratio is very large

    Time:2022-4-20

    Problem descriptionThe subject originally intended to add subtitles, which will be displayed at the bottom of the screen after triggering. However, when adjusting the canvas size, it is found that no matter how to adjust its aspect ratio with rect tool, its size changes from the world perspective, but the actual size does not change. […]

  • JS uses canvas technology to imitate ecarts histogram

    Time:2022-4-16

    Canvas canvas is a new tag in HTML5. You can draw images in web pages through JS operation canvas drawing API. Baidu has developed an open-source visual chart library echarts, which is very powerful. It can realize a variety of charts such as line chart, histogram, scatter chart, pie chart, K-line chart, map and so […]

  • HTML5 create canvas element sample code

    Time:2022-4-15

    HTML5 create canvas element Copy code The code is as follows: <!–<! DOCTYPE > declaration must be the first line of the HTML document, before the < HTML > tag. — ><!DOCTYPE html> <html> <head> <meta http-equiv=”Content-type” content=”text/html; charset = utf-8″> <title>HTML5</title> <script type=”text/javascript” charset = “utf-8”> <!– This function will be called after the […]

  • HTML5 draws text in canvas with renderings

    Time:2022-4-9

    1、 Draw text In the drawing environment, two methods are provided to draw text in canvas. Stroketext (text, x, y): draws empty text at (x, y).Filltext (text, x, y): draws solid text at (x, y). 2、 Draw text in canvas Copy code The code is as follows: <!DOCTYPE html> <html> <head> <meta http-equiv=”Content-type” content=”text/html; charset […]

  • Principle and optimization of ugui

    Time:2022-4-8

    Ugui introduction: Imgui: it is an ancient UI system brought by unity. Ngui: it is the most popular third-party UI plug-in. Fairygui: a cross platform UI system. (mostly small games) Ugui: it is the official version. UI element: the latest version of UI system. (unity2019 version) So why choose ugui for so many GUIs? Because […]

  • Romantic turtle, a Christmas tree for programmers!

    Time:2022-4-7

    I’ve been learning about pyqt5 a few days ago. In the world of Python UI, pyqt5 is just one of them, which is used to make application comparison nice. To present what we need on a canvas, we still have to rely on turtle. It’s reliable. We can do whatever we want with whatever components. […]

  • HTML5 drawing rectangle in canvas with renderings

    Time:2022-4-7

    1、 Draw rectangle Canvas uses the coordinate system with the origin (0,0) in the upper left corner. The X coordinate increases to the right and the Y coordinate increases downward. Use the rectangle drawing function of the drawing environment to draw a rectangle. FillRect (x, y, width, height): draw a solid rectangle.Strokerect (x, y, width, […]