Demystifying the Canvas API: everything from simple drawing to advanced special effects

Canvas API is a powerful drawing tool provided by HTML5, which can implement various functions from basic drawing to advanced special effects. This article will give you an in-depth understanding of how to use the Canvas API and provide specific code examples.

1. Basic Drawing
   The most basic of Canvas API is to draw simple graphics, such as rectangles, circles, straight lines, etc. The following is a code example that creates a rectangle and fills it with color:

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
ctx.fillStyle = 'red';
ctx.fillRect(10, 10, 100, 100);

In the above code, we first obtain a canvas element and pass getContext('2d' )Method to obtain the 2D drawing context objectctx. Then we set the fill color to red and use the fillRect method to draw a red rectangle with a width of 100px and a height of 100px.

2. Drawing text
   The Canvas API can also be used to draw text. The following is a code example for drawing text on Canvas:

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
ctx.font = '30px Arial';
ctx.fillStyle = 'blue';
ctx.fillText('Hello, Canvas!', 50, 50);

In the above code, we first set the font style and font size, and then set the fill color to blue, using fillTextMethod to write text on Canvas.

3. Picture drawing
   In addition to basic graphics and text drawing, the Canvas API can also be used to draw pictures. The following is a code example for drawing an image:

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
const img = new Image();
img.src = 'image.jpg';
img.onload = function() {
  ctx.drawImage(img, 0, 0);
};

In the above code, we first create an Image object and set its src attribute to the image URL. Then in the onload event, use the drawImage method to draw the image onto the Canvas.

4. Animation effects
   The Canvas API can also be used to create various animation effects. The following is a code example that uses the Canvas API to create a simple animation effect:

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

function draw() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.fillStyle = 'red';
  ctx.fillRect(x, 10, 100, 100);
  x += 1;
  if (x > canvas.width) {
    x = 0;
  }
  requestAnimationFrame(draw);
}

draw();

In the above code, we use the requestAnimationFrame method to recursively call draw Function to implement a simple displacement animation effect. In the drawing of each frame, we first use the clearRect method to clear the content on the Canvas, then draw a red rectangle with a width of 100px and a height of 100px, and increment the value of x to realize the rectangle horizontal displacement. When the value of x exceeds the width of the Canvas, reset x to 0 to achieve the effect of loop playback.

The above introduces the basic drawing, text drawing, image drawing and animation effects functions of the Canvas API, and provides specific code examples. I hope this article can help you better understand how to use the Canvas API and unleash its powerful drawing capabilities.

The above is the detailed content of Demystifying the Canvas API: everything from simple drawing to advanced special effects. For more information, please follow other related articles on the PHP Chinese website!