Master the basic knowledge of canvas: everything you need to know

Canvas is a new tag in HTML5 that provides a way to draw through JavaScript. By using Canvas, we can draw graphics, create animations, process images, and achieve interactive effects on web pages. This article will introduce the basic knowledge of Canvas, including how to create Canvas elements, draw basic shapes and paths, draw text, use images, etc., and provide detailed code examples.

1. Create Canvas element
   To use Canvas in a web page, you first need to create a Canvas element. You can use HTML code to create a Canvas element, as shown below:

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

   Copy after login

   In the above code, we create a Canvas element with the id "myCanvas" with a width and height of 500 pixels. Its size and position can be set via CSS.

2. Get the drawing context
   After creating the Canvas element, we need to get the drawing context before we can perform the drawing operation. The Canvas element provides a getContext() method to obtain the drawing context, as shown below:

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

   Copy after login

   In the above code, first use the getElementById() method to obtain the Canvas element with the id "myCanvas", and then use The getContext("2d") method obtains the 2D drawing context. Canvas also supports webgl, webgl2 and other drawing contexts. Here we mainly introduce 2D drawing.

3. Draw basic shapes and paths
   Canvas provides some methods to draw basic shapes and paths, such as rectangles, circles, lines, etc. The following are some commonly used methods and their sample codes:

• Draw a rectangle:

  ctx.fillStyle = "red"; // 设置填充颜色
  ctx.fillRect(50, 50, 100, 100); // 绘制矩形

  Copy after login

  In the above code, we first use the fillStyle attribute to set the fill color to red , and then use the fillRect() method to draw a rectangle with the upper left corner coordinates (50, 50) and a width and height of 100 pixels.

• Drawing a circle:

  ctx.beginPath(); // 开始绘制路径
  ctx.arc(100, 100, 50, 0, 2 * Math.PI); // 绘制圆
  ctx.fillStyle = "blue";
  ctx.fill(); // 填充路径

  Copy after login

  In the above code, we first use the beginPath() method to start drawing the path, and then use the arc() method to draw a circle with a center coordinate of ( 100, 100), a circle with a radius of 50 pixels and a start and end angle of 0. Then use the fillStyle attribute to set the fill color to blue, and finally use the fill() method to fill the path.

• Draw a straight line:

  ctx.moveTo(100, 200); // 将画笔移动到坐标(100, 200)
  ctx.lineTo(200, 200); // 绘制直线到坐标(200, 200)
  ctx.strokeStyle = "green"; // 设置描边颜色
  ctx.stroke(); // 描边路径

  Copy after login

  In the above code, we first use the moveTo() method to move the brush to coordinates (100, 200), and then use the lineTo() method Draw a straight line to coordinates (200, 200). Then use the strokeStyle property to set the stroke color to green, and finally use the stroke() method to stroke the path.

4. Drawing text
   Canvas provides several methods to draw text, such as fillText(), strokeText(), etc. The following is a sample code for drawing text:

ctx.font = "30px Arial"; // 设置字体样式
ctx.fillStyle = "black"; // 设置填充颜色
ctx.fillText("Hello Canvas!", 100, 100); // 绘制填充文本
ctx.strokeStyle = "red"; // 设置描边颜色
ctx.strokeText("Hello Canvas!", 100, 100); // 绘制描边文本

In the above code, we first use the font attribute to set the font style, then use the fillStyle attribute to set the fill color to black, and call the fillText() method to draw the filled text. . Then use the strokeStyle property to set the stroke color to red, and call the strokeText() method to draw the stroke text.

5. Using images
   Canvas can use images to draw, and Image objects can be used to load images. The following is a sample code that uses images:

var img = new Image(); // 创建Image对象
img.src = "image.jpg"; // 设置图像路径
img.addEventListener("load", function() {
  ctx.drawImage(img, 0, 0); // 绘制图像
});

In the above code, first create an Image object, and then use the src attribute to set the image path. In the load event, call the drawImage() method to draw the image, with the parameters being the Image object and the coordinates of the upper left corner (0, 0).

The above is the basic knowledge of Canvas and code examples. By learning these basic knowledge, it can help you understand and use Canvas for drawing operations. Hope this article is helpful to you!

The above is the detailed content of Master the basic knowledge of canvas: everything you need to know. For more information, please follow other related articles on the PHP Chinese website!