The element of HTML5 is a blank drawing area that allows you to create graphics, animations, or visual content through JavaScript. 1. First add the tag in HTML and set the width and height; 2. Use JavaScript to get the canvas object through getElementById, and call getContext('2d') to get the 2D drawing context; 3. Use fillRect, strokeRect and other methods to draw shapes; 4. Add text through font, fillText and other methods, load and draw images through Image object and drawImage methods, pay attention to using onload to ensure that the image loading is completed; 5. Add event listeners such as click, mousemove, etc. to achieve user interaction, get click or move coordinates to achieve interactive effects. Canvas itself does not come with interactive logic, and all functions need to be implemented by themselves.

The HTML5 <canvas></canvas> element is a blank drawing area you can manipulate with JavaScript to create graphics, animations, or visual content directly in the browser. It doesn't do much on its own — think of it like a digital whiteboard — but once you add JavaScript, you can draw shapes, text, images, and even create interactive visuals.

How to Set Up a Basic Canvas

To use the <canvas></canvas> element, you first need to add it to your HTML file. Here's a simple example:

 <canvas id="myCanvas" width="500" height="300"></canvas>

This creates a canvas area 500 pixels wide and 300 pixels tall. By itself, it won't show anything unless you use JavaScript to draw on it.

To start drawing, you'll need to access the canvas through JavaScript:

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

The getContext('2d') gives you a 2D drawing context, which is the most commonly used one for basic graphics.

Drawing Simple Shapes

Once you have the canvas context, you can begin drawing. For example, drawing a rectangle is straightforward:

• Use ctx.fillStyle = 'red'; to set the fill color.
• Then call ctx.fillRect(x, y, width, height); to draw the rectangle.

Here's a full example:

 ctx.fillStyle = 'blue';
ctx.fillRect(50, 50, 100, 100);

This draws a blue square starting at coordinates (50, 50), 100 pixels wide and tall.

You can also draw outlines using ctx.strokeRect() or even clear parts of the canvas with ctx.clearRect() .

Adding Text and Images

Text and images make canvas content more dynamic. To add text:

 ctx.font = '20px Arial';
ctx.fillStyle = 'black';
ctx.fillText('Hello Canvas!', 10, 50);

This displays the text "Hello Canvas!" at position (10, 50) using a 20px Arial font.

For images, you can load an image from a URL and draw it onto the canvas:

 const img = new Image();
img.src = 'image.png';
img.onload = () => {
  ctx.drawImage(img, 0, 0);
};

This loads an image and draws it at the top-left corner of the canvas once it's ready.

Just keep in mind: if the image isn't fully loaded before drawImage() runs, it won't appear. That's why we use the onload event.

Handling User Interaction

One powerful feature of the canvas is that it can respond to user input like clicks or mouse movement.

For example, to detect a click on the canvas:

 canvas.addEventListener('click', function(event) {
  const rect = canvas.getBoundingClientRect();
  const x = event.clientX - rect.left;
  const y = event.clientY - rect.top;
  console.log('Clicked at:', x, y);
});

This gives you the exact coordinates of the click, which you can then use to determine if the user clicked on a specific shape or area.

You can also track mouse movement with mousemove or handle touch events on mobile devices using touchstart and similar events.

Basically that's it. Canvas provides flexible drawing capabilities, but all interactions and logic require you to implement them in JS yourself.

The above is the detailed content of What is the HTML5 Canvas element?. For more information, please follow other related articles on the PHP Chinese website!