Canvas basic notes

1. Introduction

Canvas is an element in HTML5 that provides an area where graphics can be drawn using JavaScript. It provides a powerful drawing API that can be used to create various graphics, including lines, rectangles, circles, text, etc.

• Canvas is an element in HTML5 used for drawing graphics, animations and images.
• It provides a canvas that can operate pixels on the canvas through JavaScript to achieve various drawing effects .

<canvas>The label has only two attributes - widthandheight . When the width and height are not set, the width and height <canvas>will be initialized .300px150px

It should be noted that the size of the canvas can also be defined through CSS, but the size of this element is not the size of the canvas. When drawing, the image will stretch to adapt to its canvas size; if the element size and canvas size are not in the same ratio, the drawn image will It's twisted.

width Only when and  are specified through CSS at the same time  heightwill there be inconsistent proportions. If you only define it  width: 400px, you will find that the height will automatically become  200px.

2. Use Canvas

• In HTML,  <canvas> a Canvas element is created through tags.
• Using JavaScript, graphics can be drawn by obtaining the context object of the Canvas element.

• 1. Create Canvas element

In HTML, you can use <canvas>tags to create a Canvas element. For example:

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

The above code creates a Canvas element with a width of 500 pixels and a height of 300 pixels, and assigns an id of "myCanvas".

• Get the Canvas element: You can use JavaScript querySelectormethods or directly get the Canvas element by ID, and store it in a variable to facilitate subsequent operations.

var canvas = document.querySelector('#canvas');

• 2. Get the Canvas context

The canvas is initially blank and the script first needs to find the rendering context and then draw on it. The Canvas element requires a context object to perform drawing operations. In JavaScript, you can use getContext()methods to get the context of a Canvas. The context object provides a series of drawing methods that can be used to draw graphics. For example:

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

The above code obtains the Canvas element with the id "myCanvas" and getContext("2d")obtains a 2D context object through the method.

• 3. Draw shapes

Using the context object of Canvas, you can draw various shapes, such as rectangles, circles, lines, etc.

• Using the methods of the Canvas context object, such as  fillRect(), strokeRect(), fillText() etc., you can draw basic graphics such as rectangles and text.
• These methods accept different parameters such as coordinates, size, color, etc., which can be adjusted according to needs.
• Paths can be drawn using the methods of the Canvas context object, such as  beginPath(), moveTo(), lineTo(), closePath() etc.
• Drawing paths can achieve more complex graphics, such as straight lines, curves, polygons, etc.

• Here are some commonly used drawing methods:

  • fillRect(x, y, width, height):Draw a filled rectangle.
  • strokeRect(x, y, width, height): Draw a rectangle with a border.
  • clearRect(x, y, width, height): Clear the contents within the specified rectangular area.
  • beginPath(): Start a new path.
  • moveTo(x, y): Move the drawing cursor to the specified coordinates.
  • lineTo(x, y): Draw a straight line to the specified coordinates.
  • arc(x, y, radius, startAngle, endAngle, anticlockwise): Draw an arc.
  • fill(): Fill in the current path.
  • stroke(): Draw the border of the current path.

// 绘制直线
ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(200, 50);
ctx.stroke();

// 绘制矩形
ctx.fillRect(50, 50, 150, 100);

// 绘制圆形
ctx.beginPath();
ctx.arc(150, 150, 50, 0, 2 * Math.PI);
ctx.fill();

• 4. Draw text

  Using the Canvas context object, you can also draw text. Canvas provides some methods to draw text, including setting font, font size and text content. The following are some commonly used methods for drawing text:

  • font = "size font": Set the font size and font style of the text.
  • fillText(text, x, y):Draw filled text.
  • strokeText(text, x, y): Draw text borders.
  • measureText(text): Returns an object containing the width of the text.

•  5. Set style and color

Canvas provides some methods to set the drawing style and color, such as line width (lineWidth), fill color (fillStyle), and border color (strokeStyle) .

// 设置线条宽度和颜色
ctx.lineWidth = 2;
ctx.strokeStyle = '#000000';

// 设置填充色
ctx.fillStyle = '#FF0000';

• 6. Draw images

  Using the Canvas context object, images can be drawn.

• drawImage()Images can be drawn using methods of the context object, such as Canvas  .
• You can load pictures and draw them on Canvas, and you can also zoom, cut, and other operations on the pictures.

• Here are some common ways to draw images:

  • drawImage(image, x, y):Draw an image.
  • getImageData(x, y, width, height): Get the image data of the specified area.

• 7. Animation

  Using Canvas, you can create animation effects. A common method is to use requestAnimationFrame()functions to loop through the drawing code to achieve animation effects.

• Using Canvas and JavaScript, animation effects can be achieved.
• You can use  requestAnimationFrame() methods to loop through drawing functions to achieve smooth animation effects.

• For example:

  function draw() {
    // 绘制代码
    requestAnimationFrame(draw);
  }
  draw();
  

  The above code defines a draw()function that will be called continuously to achieve animation effects.

• 8. Clear the canvas

• Using the methods of the Canvas context object, for example , the canvas can be cleared. clearRect()
• You can clear the canvas before each drawing, and then draw again to achieve dynamic effects.

ctx.clearRect(0, 0, canvas.width, canvas.height);

Summarize

• Canvas is a powerful drawing tool that can draw various graphics, animations and images.
• By learning Canvas, you can master basic drawing skills and provide more possibilities for web design and development.
• By learning this knowledge, you can start using Canvas to draw various graphics, text, and images, and create animation effects.

Then record it here first! ~I’ll add the others as I come across them! ~