What elements does canvas include: a detailed introduction

Understand Canvas: What elements does it contain?

Overview:
Canvas is a new element in HTML5, which provides a set of APIs for drawing graphics. By using Canvas, you can create complex graphics, animations, games and other interactive elements on your web pages. This article will introduce the elements contained in Canvas and usage examples.

1. Canvas element:
   The Canvas element is an area used to accommodate drawing in an HTML document. The canvas can be resized by setting the width and height properties of the Canvas element. The following is a code example of a Canvas element:

<canvas id="myCanvas" width="800" height="600"></canvas>

2. Context:
   The Canvas element itself cannot draw graphics directly, and you need to obtain the context object to operate and implement drawing. Function. Canvas supports two contexts, 2D context and WebGL context. Among them, 2D context is the default context type, which is more suitable for drawing 2D graphics. The following is a sample code to obtain the 2D context:

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

3. Basic shapes:
   Canvas provides a series of APIs to draw basic shapes, such as rectangles, circles, lines, etc. The following is sample code for several basic shape drawings:

// 绘制矩形
ctx.fillStyle = "red";
ctx.fillRect(50, 50, 200, 100);

// 绘制圆形
ctx.beginPath();
ctx.arc(200, 200, 100, 0, 2 * Math.PI);
ctx.fillStyle = "blue";
ctx.fill();

// 绘制线条
ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(200, 200);
ctx.strokeStyle = "green";
ctx.lineWidth = 5;
ctx.stroke();

4. Image:
   Canvas can draw images including pictures. Use the drawImage() method to draw an image onto the Canvas. Here is a sample code for drawing an image:

var img = new Image();
img.src = "image.jpg";
img.onload = function() {
  ctx.drawImage(img, 0, 0);
}

5. Text:
   Canvas allows text to be drawn on the canvas. Filled and outlined text can be drawn using the fillText() and strokeText() methods. The following is a sample code for drawing text:

ctx.font = "30px Arial";
ctx.fillStyle = "black";
ctx.fillText("Hello World!", 50, 50);

ctx.lineWidth = 3;
ctx.strokeStyle = "red";
ctx.strokeText("Hello World!", 50, 100);

6. Gradient and shadow:
   Canvas supports the creation of gradient and shadow effects to enrich the drawing effect. Linear and radial gradients can be created using the createLinearGradient() and createRadialGradient() methods. Shadow effects can be achieved using the shadowOffsetX, shadowOffsetY, shadowBlur, and shadowColor properties. The following is a sample code for gradients and shadows:

// 创建渐变
var grd = ctx.createLinearGradient(0, 0, 200, 0);
grd.addColorStop(0, "red");
grd.addColorStop(1, "white");
ctx.fillStyle = grd;
ctx.fillRect(50, 50, 200, 100);

// 创建阴影
ctx.shadowOffsetX = 4;
ctx.shadowOffsetY = 4;
ctx.shadowBlur = 5;
ctx.shadowColor = "gray";
ctx.fillStyle = "blue";
ctx.fillRect(50, 200, 200, 100);

The above is just an introduction to some basic drawing elements and functions in Canvas. Canvas also has more powerful functions and APIs for developers to use. Through in-depth study and use of Canvas, you can create colorful interactive elements to improve user experience and page effects.

The above is the detailed content of What elements does canvas include: a detailed introduction. For more information, please follow other related articles on the PHP Chinese website!