Tag：html5
-
Time：2021-8-2
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 […]
-
Time：2021-8-2
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 […]
-
Time：2021-7-31
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 […]
-
Time：2021-7-30
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”> […]
-
Time：2021-7-29
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 […]
-
Time：2021-7-28
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: […]
-
Time：2021-7-27
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 […]
-
Time：2021-7-26
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 […]
-
Time：2021-7-25
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 […]
-
Time：2021-7-24
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); […]
-
Time：2021-7-23
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 […]
-
Time：2021-7-22
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 […]
