This week, due to the BGM of my friend’s game scene, I didn’t write any tutorial demo(actually lazy), but I couldn’t let you see that I didn’t do anything, so I have this topic of application and optimization, but also a preview post, starting next week, will be a continuous actual combat personal avatar generator

Vue Express Mongo Canvas Node

Heat: Each chapter is about core implementation, not boring

Cycle: 1-2 weeks to complete

Features: how to generate unique personal avatar according to the user’s input QQ mailbox

This is the end of the trailer…….

Get into the business

When to use DOM and when to canvas/ SVG

Dom is easy to operate because dom has a hierarchical structure and a lot of nice apis to interact with, but it is not easy to render in the browser. A large number of nested DOM will increase the browser depth traversal time, so there is a combination of virtual DOM and Diff.

Canvas single-layer rendering, even if it is just like the hierarchical effect in the previous pseudo-3D, is only in the same dom layer, which will not increase the time of the browser when rendering the page due to rendering problems. During development, we can consider transferring some of the effects of shallow interactions to the canvas(such as the wheel cast image). In this way, we can enhance the visual effects while reducing the browser rendering consumption.

Questions about getImageData across domains

This question is also a lot of people in the group to ask me, in fact, the general occurrence of this kind of question is mostly local run, this question also has the answer on the Internet, the way is a little vulgar, is to recommend you to change a browser or hang on the server. Because local folders don’t have domain names by default.

"Uncaught DOMException: Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The canvas has been tainted by cross-origin data.
Copy the code

If you cross domains on the server, you can try it

var img = new Image();
img.crossOrigin = ' ';
img.onload = function () {
    ctx.drawImage(this.0.0);
    ctx.getImageData(0.0.200.200);
};
Copy the code

The cache problem

When using canvas, there may be no graph drawn, except the problem of code, because the graph of the last frame has been clearRect before the drawing is completed, so we need a cache for preprocessing, which requires off-screen processing.

var offscreen = document.createElement("canvas");
offscreen.width = 1000;
offscreen.height = 1000;
var offctx =offscreen.getContext("2d");
Copy the code

Once we’ve created the off-screen canvas, we can give it everything we need to draw, draw it and then use the drawImage directly to draw it onto the main canvas.

When there are more objects to deal with, an off-screen may also cause the picture to stall. At this time, we can plan off-screen for small objects, so that each object has its own drawing environment, which greatly improves the rendering fluency. This is a test case, and I don’t know about you, but I can run a thousand balls here, okay

Pixel processing options

When we want to do pixel processing, we can use Bitmap or Arradata. At this time, we need to make a choice. Bitmap has width and height, and it is easier for us to coordinate pixels in the plane, but its time complexity and space complexity are higher than Arraydata. So in the choice of time to make a choice according to the actual situation.

How to Learn Canvas

Someone asked me this question, canvas has few apis, even WebGL has more than it, but the difficulty of WebGL is not the API, but the writing of shader.

  1. If you only want to do 2D, you can consider getting a software called PS/Sketch. There are no requirements on algorithm. After all, I am also good at math and physics, but you should have some basic knowledge of graphics. Mastering canvas has certain advantages.
  2. When learning Canvas, there are many simple video tutorials on the Internet, you can go to have a look, more is to contact with the graphics engine (including games containing picture logic), think about how they are implemented, can improve logic thinking
  3. If you want to start with WebGL, start withthree.jsIt is really difficult to get started and understand WebGL. I am also a chicken, but in the process of learning, you can greatly improve your understanding of graphics rendering.

These are common questions, and there may be ones I haven’t mentioned, please ask me questions, and I will try my best to explain them to you.

The related technical tutorials of Canvas and SVG will be updated from time to time. There will be practical ones, master principles ones, 2D 2.5D 3D ones, and linear algebra, physical graphics and other related basic knowledge will be involved.

Welcome guests to pay attention to the coin collection

Test cases are cached in this article