• IE9 Beta browser support for HTML5 / CSS3


    Some people say that IE9 is the second revolution of Microsoft. I don’t think this statement is at all. Since IE6, the update of IE has not been so thorough. It fully supports DOM Level 2, css2.1, and the interface is more streamlined… Of course, what we are most concerned about is how IE9 supports […]

  • Explain in detail the non-zero wrapping principle when drawing irregular graphics with HTML5 canvas


    Path direction and non-zero surround principleUsually, the graphics we draw are regular, so if we draw an abstract work with lines, like the figure below, do children’s shoes know how to dye with fill()? Here we need to use a mathematical method – the non-zero surround principle to judge which area is inside and which […]

  • Tutorial on drawing arcs using HTML5 canvas API


    Draw a standard arc Before we start to optimize our environment. Inspired by the texture of last class, if you don’t like this background, I also provide other background images in the images directory for you to choose from. In addition, all style sheets are written under < head >. JavaScript CodeCopy contents to clipboard […]

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