The H5 Canvas API is an important tool in HTML5 for drawing graphics and achieving interactive effects. Its pixel-based properties make it perform well when dealing with complex graphics and real-time rendering. 1. Initialization requires correctly setting the width and height of the canvas element and obtaining the drawing context ctx; 2. The drawing basics include using fillRect, strokeRect, path drawing and other methods, and pay attention to the use of beginPath and closePath; 3. To realize interaction, coordinate conversion and collision detection must be performed manually, and click areas are judged by monitoring mouse events; 4. Animation should be driven by requestAnimationFrame, and performance should be optimized such as reducing the redraw range, layered drawing, etc. to improve fluency and efficiency. Mastering these key points can help develop interactive web applications and mini-games.

The Canvas API is a very powerful tool provided by HTML5 to draw graphics, create animations, and even achieve interactive effects on web pages. It is not DOM-based like SVG, but rather a pixel-based drawing surface, so it performs better when dealing with complex graphics and real-time rendering. If you want to do some interactive and visually rich web applications or mini-games, Canvas is an unavoidable technology.

Let’s take a look at some key points and usage techniques of the H5 Canvas API from several practical perspectives.

1. Basic structure and initialization: Don't miss this step

The first step in using Canvas is to add a <canvas></canvas> element to the HTML page:

 <canvas id="myCanvas" width="800"    style="max-width:90%"></canvas>

Then get the context (context) through JavaScript, which is the core object that really operates the drawing:

 const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');

There is a small detail here that many people are likely to ignore: The default size of Canvas is 300x150 . If the width and height attribute is not set, the canvas may be displayed much smaller than you expected.

Also, it should be noted that getContext('2d') is the most commonly used context type, and WebGL is optional, but that is another topic.

2. Drawing basics: shape, color and path

Canvas is the "immediate mode" drawing method, which means that once you finish drawing a graph, it is just pixels, and you can no longer operate this graphic object alone in the future. So the drawing order is very important.

Common drawing methods include:

• fillRect(x, y, width, height) : fill rectangle
• strokeRect(x, y, width, height) : stroke rectangle
• clearRect(x, y, width, height) : clearRect(x, y, width, height): clear the area
• Path related: beginPath() , moveTo() , lineTo() , arc() , etc.

For example, draw a red circle:

 ctx.beginPath();
ctx.arc(100, 100, 50, 0, Math.PI * 2);
ctx.fillStyle = 'red';
ctx.fill();
ctx.closePath();

Notice:

• It is best to call beginPath() every time you start a new path, otherwise strange connection lines may appear
• closePath() is not necessary, but helps to end the path clearly

3. The key to realizing interaction: coordinate conversion and event binding

The graphics on Canvas are essentially pixels and cannot directly bind click events like DOM elements. To achieve interaction, for example, clicking a graphic to trigger an action, you need to manually determine whether the mouse position falls into the graphic.

The basic ideas are as follows:

1. Listen to canvas' mouse events (such as click or mousemove )
2. Get the mouse coordinates relative to canvas
3. Collision detection is performed based on the position information of the graph

For example, get the mouse position:

 canvas.addEventListener('click', function(e) {
    const rect = canvas.getBoundingClientRect();
    const x = e.clientX - rect.left;
    const y = e.clientY - rect.top;
    // Here you can add judgment logic, such as whether a circle or rectangle is clicked});

For circular click detection, the distance can be calculated using the Pythagorean theorem:

 function isPointInCircle(px, py, cx, cy, radius) {
    const dx = px - cx;
    const dy = py - cy;
    return dx * dx dy * dy <= radius * radius;
}

This type of judgment can be expanded according to different figures, such as rectangles, polygons, etc.

4. Animation and performance optimization: requestAnimationFrame is the key

Canvas is most commonly used for animation, such as game loops, particle systems, etc. The basic way to implement animation is to clear the canvas, redraw all elements, and continuously loop through the process.

It is recommended to use requestAnimationFrame() to drive animations instead of setInterval() or setTimeout() because the former can better adapt to browser refresh rate, improve performance and fluency.

Simple example:

 function animate() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    // Update and draw the graph requestAnimationFrame(animate);
}

animate();

A few points to pay attention to in terms of performance:

• Minimize frequent clearRect and full-screen repainting
• Consider layered drawing (multiple canvas) or off-screen rendering when there are too many graphics
• For static backgrounds, it can be cached as image data

Canvas API is not particularly difficult to learn, but it requires a certain amount of practice and understanding of the basics of graphics to use it well. Once you master these common techniques, you can make button responses, dynamic charts, mini-game interfaces and even simple 2D games.

Basically all this is it, it is not complicated but has a lot of details, so it is easier to get started by trying it.

The above is the detailed content of Deep Dive into H5 Canvas API for Interactive Graphics. For more information, please follow other related articles on the PHP Chinese website!