Master the implementation and working principle of Canvas rendering mode-HTML Tutorial-php.cn

Master the implementation and working principle of Canvas rendering mode

王林

Release： 2024-01-17 08:40:15

Original

1285 people have browsed it

Master the implementation and working principle of Canvas rendering mode

Understanding the principles and implementation of Canvas rendering mode requires specific code examples

First of all, we need to make it clear that Canvas is the drawing API provided by HTML5, which allows us to Use JavaScript to draw graphics, animations, and other visualizations. Canvas can be drawn using two rendering modes: 2D rendering mode and WebGL rendering mode.

2D rendering mode is the default mode of Canvas, which uses the 2D context of the Canvas element in HTML5 to draw graphics. In 2D rendering mode, we can use a series of methods to draw graphics, such as drawing rectangles, circles, paths, etc.

The following is an example of drawing a rectangle using 2D rendering mode:

<!DOCTYPE html>
<html>
<head>
  <title>Canvas 2D渲染模式示例</title>
</head>
<body>
  <canvas id="canvas" width="400" height="400"></canvas>

  <script>
    // 获取Canvas元素
    var canvas = document.getElementById('canvas');
    // 获取2D上下文
    var ctx = canvas.getContext('2d');

    // 绘制矩形
    ctx.fillStyle = 'red'; // 矩形填充颜色
    ctx.fillRect(50, 50, 300, 200); // 矩形左上角坐标(50, 50)、宽度300、高度200
  </script>
</body>
</html>

Copy after login

WebGL rendering mode is a high-performance graphics library based on OpenGL ES. It can run on the GPU and is more complex to implement. and faster graphics rendering. WebGL rendering mode provides a shader program for drawing graphics, and we can write shader code using GLSL language.

The following is an example of drawing a rectangle using WebGL rendering mode:

<!DOCTYPE html>
<html>
<head>
  <title>Canvas WebGL渲染模式示例</title>
</head>
<body>
  <canvas id="canvas" width="400" height="400"></canvas>

  <script>
    // 获取Canvas元素
    var canvas = document.getElementById('canvas');
    // 获取WebGL上下文
    var gl = canvas.getContext('webgl');

    // 顶点着色器程序
    var vertexShaderSource = `
      attribute vec2 a_position;
      void main() {
        gl_Position = vec4(a_position, 0, 1);
      }
    `;

    // 片元着色器程序
    var fragmentShaderSource = `
      precision mediump float;
      void main() {
        gl_FragColor = vec4(1, 0, 0, 1);
      }
    `;

    // 创建顶点着色器
    var vertexShader = gl.createShader(gl.VERTEX_SHADER);
    gl.shaderSource(vertexShader, vertexShaderSource);
    gl.compileShader(vertexShader);

    // 创建片元着色器
    var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
    gl.shaderSource(fragmentShader, fragmentShaderSource);
    gl.compileShader(fragmentShader);

    // 创建着色器程序
    var shaderProgram = gl.createProgram();
    gl.attachShader(shaderProgram, vertexShader);
    gl.attachShader(shaderProgram, fragmentShader);
    gl.linkProgram(shaderProgram);
    gl.useProgram(shaderProgram);

    // 获取着色器中的属性和变量
    var positionAttributeLocation = gl.getAttribLocation(shaderProgram, 'a_position');
    var positionBuffer = gl.createBuffer();
    gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
    var positions = [
      0, 0,
      0, 0.5,
      0.7, 0
    ];
    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions), gl.STATIC_DRAW);
    gl.enableVertexAttribArray(positionAttributeLocation);
    gl.vertexAttribPointer(positionAttributeLocation, 2, gl.FLOAT, false, 0, 0);

    // 清空Canvas
    gl.clearColor(0, 0, 0, 0);
    gl.clear(gl.COLOR_BUFFER_BIT);

    // 绘制矩形
    gl.drawArrays(gl.TRIANGLES, 0, 3);
  </script>
</body>
</html>

Copy after login

The above is an example of drawing a rectangle using WebGL rendering mode, which uses a vertex shader and a fragment shader Perform graphics rendering and use buffers to store the vertex data of the graphics.

To sum up, the principle and implementation of Canvas rendering mode include 2D rendering mode and WebGL rendering mode. The 2D rendering mode uses a 2D context to draw graphics, while the WebGL rendering mode is a high-performance graphics library based on OpenGL ES that can run on the GPU to achieve more complex and faster graphics rendering. In actual applications, we choose to use 2D rendering mode or WebGL rendering mode to draw graphics according to needs.

The above is the detailed content of Master the implementation and working principle of Canvas rendering mode. For more information, please follow other related articles on the PHP Chinese website!