Tag：canvas
-
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 […]
-
Time：2021-7-18
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 […]
-
Time：2021-7-14
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, […]
-
Time：2021-7-6
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 […]
