Canvas Technology Overview

Introduction to Canvas technology

Overview
Canvas is a new feature in HTML5. It is a canvas element that can be used to draw graphics, animations, games, etc. . Compared with using images or Flash to achieve the same effect, Canvas has higher performance and consumes less resources.

Basic usage
The Canvas element is transparent by default. It can specify the width and height by setting CSS styles, or it can be set dynamically using JavaScript. Then, use the getContext method to obtain the canvas context object, through which we can perform various drawing operations.

Draw shapes
You can draw a variety of shapes through Canvas, including rectangles, circles, straight lines, arcs, etc. Here are some sample codes:

1. Draw a rectangle

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "red";
ctx.fillRect(20, 20, 100, 50);

This code will draw a red rectangle on the canvas, with the starting point being (20, 20) and the width is 100 and the height is 50.

2. Draw a circle

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.arc(100, 100, 50, 0, 2 * Math.PI);
ctx.fillStyle = "blue";
ctx.fill();

This code will draw a blue circle on the canvas, with the center coordinates of (100, 100) and a radius of 50.

3. Draw a straight line

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.moveTo(20, 20);
ctx.lineTo(100, 100);
ctx.strokeStyle = "black";
ctx.lineWidth = 2;
ctx.stroke();

This code will draw a black straight line on the canvas, with the starting point being (20, 20) and the end point being (100, 100). The line width is 2.

Drawing text
In addition to drawing shapes, Canvas can also be used to draw text. You can use the fillText method to draw solid text and the strokeText method to draw hollow text. The following is a sample code:

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "black";
ctx.font = "24px serif";
ctx.fillText("Hello, Canvas!", 50, 50);

This code will draw a solid black text on the canvas with the content "Hello, Canvas!" and the starting point is (50, 50).

Animation Effect
Canvas can not only draw static graphics, but also achieve various animation effects. Animation effects can be achieved by using the requestAnimationFrame function to redraw the canvas between each frame. Here is a simple sample code:

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var x = 0;

function draw() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.fillRect(x, 20, 100, 50);
  x += 1;
  requestAnimationFrame(draw);
}

requestAnimationFrame(draw);

This code will animate a moving rectangle drawn on the canvas. Before each frame starts, clear the canvas, then draw a red rectangle, then add 1 to the x coordinate, and then request the next frame of animation.

Summary
Canvas technology is a very powerful and flexible drawing tool in HTML5, through which various graphics, animation and game effects can be achieved. This article briefly introduces the basic usage of Canvas, including drawing shapes, drawing text and achieving animation effects. I hope readers can have a preliminary understanding of Canvas technology through this article and be able to further study and apply it.

The above is the detailed content of Canvas Technology Overview. For more information, please follow other related articles on the PHP Chinese website!