• Using HTML5 canvas to draw rounded rectangle and some related application examples


    The rounded rectangle is composed of four lines and four 1 / 4 arcs, which are disassembled as follows. Because we want to write a function instead of a fixed rounded rectangle, the parameters required by the function are listed here. After analysis, type the code directly. JavaScript CodeCopy contents to clipboard <!DOCTYPE html>    <html lang=“zh”> […]

  • Explain in detail the method of translating and rotating pictures through HTML5 canvas


    Translate ()Translation transformation, hence the name Si Yi, is a general graphic displacement. For example, here I want to translate the rectangle at (100100) to (200200). Then I just need to add context. Translate (100100) before drawing the rectangle. Here, translate () only passes in two parameters, which are actually the coordinates of the origin […]

  • Drawing 3D Earth by webgl


    It may be convenient to display the 3D model through three.js, but do you know how it works step by step from mesh construction to mapping to final rendering? Now we can implement it directly by using the underlying web GL and a little mathematical knowledge. The effect of this section:Webgl 3D Earth content syllabus […]

  • An example is given to explain the method of using HTML5 canvas API to operate graphic rotation


    As a web developer, I’ve been working with HTML5 canvas elements. Rendering pictures is a big branch, which is very important and commonly used. Therefore, today’s tutorial is about canvas image display and how to rotate images. Maybe it’s a good thing you really want now. In general, there are two ways of canvas rotation: […]

  • Tips for HTML — skillfully using tag anchor link (# anchor link # page specific location # anchor location # DOM location # anchor link used in hash routing)


    #Author: one pixel   In front-end development, we often encounter the need to locate a specific location on the page. El. Scrollintoview () and el. Are provided by JavaScriptScrollintoviewifneeded() is a new API to realize the visibility of elements in the interface. Of course, you can also control the position of the current element by […]

  • Explain in detail how to use HTML5 canvas API to control the zoom transformation of pictures


    Scale transform scale (SX, SY) passes in two parameters, which are the scaling multiple of the object in the horizontal and vertical directions. For example, context. Scale (2,2) enlarges the image twice. In fact, it looks simple, but there are still some problems in practical use. Let’s look at a piece of code: JavaScript CodeCopy […]

  • Web front end lesson 69 – viewport and REM units


    1. Viewport Viewport is short for view window. The size of the viewport is the actual size of the HTML element. However, if you want to display the actual page size on the mobile terminal, you must adapt the viewport, Otherwise, when the mobile end loads a page, the default viewport width 980px or a […]

  • In depth analysis of HTML5 canvas control graphic matrix transformation method


    Before introducing the matrix transformation (), let’s talk about what a transformation matrix is. The above is the transformation matrix corresponding to the transform () method in canvas. This method passes in the six parameters shown in the figure, specifically context. Transform (a, B, C, D, e, f). The corresponding meaning of each parameter is […]

  • On the difference between SRC and href


    SRC and href are attributes used to introduce external resources, such as pictures, videos, CSS files, JavaScript files, etc.So what is the difference between them? hrefThe (hypertext reference hypertext reference) attribute defines the link or relationship between the current element or the current document and the target resource by specifying the location of the web […]

  • Method of controlling font display and rendering using HTML5 canvas API


    API introductionToday we begin to fight for a new content – the text API of HTML5 canvas! You know, artists are usually also calligraphers, so we should learn to write and write beautiful words. Isn’t it interesting? OK, let’s preview what canvas text APIs are. attribute describe font Sets or returns the current font property […]

  • Front end common template engine – arttemplate


    When we layout the page with H5 + CSS3 and display data to the page through the interface, it’s ok if there are few data. Sometimes there are multiple ul – > Li   You can only loop the data returned by the interface and display it one by one. Some time ago, I inadvertently […]

  • Make a simple word guessing game with HTML5 canvas API


    Without saying a word, first on the renderings and source code~ HTML code XML/HTML CodeCopy contents to clipboard <!doctype html>   <html lang=“en”>       <head>           <meta charset=“utf-8” />           <script type=“text/javascript” src=“chp1_guess_the_letter.js”></script>           <script type=“text/javascript” src=“modernizr.custom.99886.js”></script>       </head>       <body>           <canvas id=“canvas_guess_the_letter” width=“500” height=“300”>   Your browser does not support HTML5   Canvas         </canvas>           <form>               <input type=“button” id=“createImageData” value=“Export Canvas Image” />;            </form>       </body>   </html>   JS code JavaScript CodeCopy contents to clipboard /**    * @author Rafael    */   window.addEventListener(“load”, eventWindowLoaded, false); […]