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

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

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

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

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

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

  • The example explains the method of drawing shadow effect with HTML5 canvas


    To create a shadow effect, you need to operate on the following four attributes: 1. Context. Shadowcolor: shadow color.2. Context. Shadowoffsetx: X-axis displacement of shadow. Positive values to the right and negative values to the left.3. Context. ShadowOffsetY: Shadow Y-axis displacement. Positive values down, negative values up.4. Context. Shadowblur: Shadow blur filter. The larger the […]

  • How to specify color and transparency in HTML5 canvas drawing


    Specify the color Black is the default color of canvas painting. If you want to change a color, you have to specify the color before the actual painting. JavaScript CodeCopy content to clipboard ctx.strokeStyle = color    Specify the color of the drawn line: JavaScript CodeCopy content to clipboard ctx.fillStyle = color    Specifies the color of the fill:Let’s […]

  • The first attempt of canvas: drawing magnifier Icon


    With the popularity of smart phones and the development of Internet front-end, the requirements of content style are becoming too elegant. Here’s how to use canvas to draw a simple magnifying glass icon: We divide the drawing process of canvas into path analysis and development path analysis First observe that the magnifying glass icon is […]

  • Canvas particle text


    I saw it by accidentI’m still hereOfA little canvas every dayThe “particle text” section feels very good. I have studied it, because the original author has added several attributes to interact with the user, which can dynamically change the style of particle text animation, and the code is also relatively complete and scattered. For learners, […]

  • Canvas animation clock


    Recently I’m learning canvas, and then I make an animation clock according to the example on MDNWhy build a wheel? It’s ugly This is an example of MDN, how to say, more retro. First of all, find a picture of the clock, which is the one below. ——From bigger than biggerdribbbleWebsite,picture source(deleted) Then start to […]