Maîtriser la mise en œuvre et le principe de fonctionnement du mode de rendu Canvas-tutoriel HTML-php.cn

Maîtriser la mise en œuvre et le principe de fonctionnement du mode de rendu Canvas

王林

Libérer： 2024-01-17 08:40:15

original

1282 Les gens l'ont consulté

Maîtriser la mise en œuvre et le principe de fonctionnement du mode de rendu Canvas

Comprendre les principes et la mise en œuvre du mode de rendu Canvas nécessite des exemples de code spécifiques

Tout d'abord, il faut préciser que Canvas est l'API de dessin fournie par HTML5, qui nous permet d'utiliser JavaScript dans le navigateur pour dessiner graphiques, animations et autres effets visuels . Le canevas peut être dessiné en utilisant deux modes de rendu : le mode de rendu 2D et le mode de rendu WebGL.

Le mode de rendu 2D est le mode par défaut de Canvas, qui utilise le contexte 2D de l'élément Canvas en HTML5 pour dessiner des graphiques. En mode de rendu 2D, nous pouvons utiliser une série de méthodes pour dessiner des graphiques, comme dessiner des rectangles, des cercles, des chemins, etc.

Ce qui suit est un exemple de dessin d'un rectangle en utilisant le mode de rendu 2D :

<!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>

Copier après la connexion

Le mode de rendu WebGL est une bibliothèque graphique hautes performances basée sur OpenGL ES, qui peut s'exécuter sur le GPU pour obtenir un rendu graphique plus complexe et plus rapide. Le mode de rendu WebGL fournit un programme de shader pour dessiner des graphiques, et nous pouvons écrire du code de shader en utilisant le langage GLSL.

Ce qui suit est un exemple de dessin d'un rectangle en utilisant le mode de rendu WebGL :

<!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>

Copier après la connexion

Ce qui précède est un exemple de dessin d'un rectangle en utilisant le mode de rendu WebGL, qui utilise un vertex shader et un fragment shader pour le rendu graphique, et utilise un tampon Pour stocker les données de sommet du graphique.

En résumé, le principe et la mise en œuvre du mode de rendu Canvas incluent le mode de rendu 2D et le mode de rendu WebGL. Le mode de rendu 2D utilise un contexte 2D pour dessiner des graphiques, tandis que le mode de rendu WebGL est une bibliothèque graphique hautes performances basée sur OpenGL ES qui peut s'exécuter sur le GPU pour obtenir un rendu graphique plus complexe et plus rapide. Dans les applications réelles, nous choisissons d'utiliser le mode de rendu 2D ou le mode de rendu WebGL pour dessiner des graphiques en fonction des besoins.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!