Tag:canvas

  • Drawing a rectangle with a brush and canvas in Android

    Time:2020-5-25

    scene In Android, the brush uses the paint class, and the canvas uses the canvas class to represent it. Basic steps of drawing First, write a custom view class inherited from view, then rewrite its OnDraw method, and finally add the custom view to actvity. effect     Note: Blog:https://blog.csdn.net/badao_liumang_qizhi Official accountDomineering procedural apeGet programming […]

  • Painting an Android robot with canvas and paint in Android

    Time:2020-5-23

    scene In Android, the brush uses the paint class, and the canvas uses the canvas class to represent it. Basic steps of drawing First, write a custom view class inherited from view, then rewrite its OnDraw method, and finally add the custom view to actvity. effect     Note: Blog:https://blog.csdn.net/badao_liumang_qizhi Official accountDomineering procedural apeGet programming […]

  • Daily use of canvas

    Time:2020-5-20

    canvas <canvas id=”mycanvas” width=”300″ height=”500″> This browser does not support canvas </canvas> The length and width of the canvas are specified in the definition. When using CSS definition, there will be distortion Insert picture let canvas=document.getElementById(“mycanvas”).getContext(‘2d’) let img=new Image() img.src=’./test.jpg’ img.onload=function(){ canvas.(img,top,left,width,height) } Top place the X coordinate position of the image on the canvas […]

  • HTML 5 realizes color tolerance matting with canvas

    Time:2020-5-19

    Using the getimagedata of canvas, we can get the information of every pixel of a picture. By comparing the information of every pixel, we can find the pixel points that need to be eliminated. For example, in the following picture, if we want to remove the white part (pink is the background color of the […]

  • Example code of HTML5 canvas realizing K-line graph

    Time:2020-5-16

    Because of the company’s project requirements, a K-line chart is needed to let traders clearly see the quotation of a trading variety in various time periods, as well as the current real-time quotation. There are two directions for me to consider: one is the implementation of plug-ins like highcharts — SVG, and the other is […]

  • Explore applet 2D drawing: starting with lines

    Time:2020-5-14

    Canvas. Since 2.9.0, a new canvas 2D interface is supported (the type attribute needs to be specified), and the same layer rendering is supported. The original interface is no longer maintained. The application of small program development drawing class is based on canvas. For the existing canvas application on H5, to migrate to the small […]

  • Using canvas to realize the digital rain effect of hacker empire

    Time:2020-5-11

    Using canvas to realize the digital rain of hacker empire design sketch: code: <!DOCTYPE html> <html lang=”en”> <head> <meta charset=”UTF-8″> <meta name=”viewport” content=”width=device-width, initial-scale=1.0″> <meta http-equiv=”X-UA-Compatible” content=”ie=edge”> <title>Document</title> <style> body { margin: 0; padding: 0; } canvas { width: 100%; height: 100%; } </style> </head> <body> <canvas style=”background:#111″></canvas> <script> //Get canvas object var can = […]

  • HTML 5 canvas gesture unlocking source code sharing

    Time:2020-5-6

    Map first demo.html <!DOCTYPE html> <html lang=”en”> <head> <meta charset=”UTF-8″> <meta name=”viewport” content=”width=device-width, initial-scale=1.0, user-scalable=no”> < title > gesture unlocking < / Title > <style type=”text/css”> body{ text-align: center; background: #305066; } h4{ color: #22C3AA; } </style> </head> <body> <script type=”text/javascript” src=”src/index.js”></script> <script type=”text/javascript”> //1. Generation background //2. Title Generation //3. Generate canvas tags dynamically […]

  • Detailed explanation of HTML5 canvas label and basic use

    Time:2020-5-3

    HTML 5 < canvas > tag definition and usage The < canvas > label defines graphics, such as charts and other images. The < canvas > label is just a graphics container, you have to use scripts to draw graphics. Example How to display a red rectangle through the canvas element: <canvas id=”myCanvas”></canvas> <script type=”text/javascript”> […]

  • The implementation code of canvas simple line animation

    Time:2020-4-25

    Introduction: the simple line animation of canvas animation introduction series. Although it’s simple, there are quite a lot of wired animation application scenes, so I made a small demo, which is all in one. Step1: draw points Create tags first<canvas id=”canvas”></canvas>Set the coordinates of several points const points = [ [200, 100], // up [300, […]

  • Vue + websocket + ES6 + canvas make [draw and guess] games

    Time:2020-4-24

    Project address: https://github.com/jrainlau/draw-something Download & run git clone [email protected]:jrainlau/draw-something.git cd draw-something Node WS server.js // enable websocket server NPM run dev // runs the client program Then the browser can open localhost: 8080 Effect preview: Overall structure Because I’m in a hurry, I’ve been playing games like drawing and guessing with my friends all the […]

  • Wechat applet canvas to achieve horizontal and vertical centering effect

    Time:2020-4-23

    To make a scratch card recently, you need to center the text horizontally and vertically in canvas wxml <canvas type=’2d’ id=”myCanvas” width=”300″ height=”150″ style=”background:yellow;” \>   Using canvas2d to build a canvas The blue line is the horizontal center line The red line is the vertical center line Text setting method fillTextMethod to set the […]