计算机 Canvas默认的方式有哪些

在本文中，我们将介绍计算机上使用Canvas时默认的方式。Canvas是HTML5新增的一个绘图元素，它提供了一种使用JavaScript进行图形绘制的方法，可以在网页上实时绘制图形、动画和其他可视化效果。

概述

Canvas是一个矩形区域，用于在网页上绘制图形。它具有一个坐标系，可以通过JavaScript代码来控制绘制的内容。Canvas有两种默认的绘制方式：2D绘制和WebGL绘制。接下来我们将分别介绍这两种方式。

2D绘制

2D绘制是Canvas的默认绘制方式，它使用HTML5的Canvas API来绘制图形。通过Canvas API，我们可以绘制直线、曲线、矩形、圆形等各种形状，并添加填充色、渐变、阴影效果等。下面是一个简单的示例，展示了如何使用Canvas绘制一个红色的矩形：

let canvas = document.getElementById("myCanvas");
let ctx = canvas.getContext("2d");
ctx.fillStyle = "red";
ctx.fillRect(50, 50, 200, 100);

在上面的代码中，我们首先获取了一个id为”myCanvas”的Canvas元素，然后通过getContext("2d")方法获取了一个渲染上下文。接下来，我们通过设置fillStyle属性为”red”来指定矩形的填充色，并使用fillRect()方法绘制一个矩形。

除了绘制形状，Canvas API还提供了丰富的绘制方法，如绘制文本、绘制图像、绘制路径等。通过组合使用这些方法，我们可以实现各种复杂的绘制效果。

WebGL绘制

WebGL是基于OpenGL ES标准的一种Web图形渲染技术，它可以在 Canvas 元素中进行3D绘制。WebGL 绘制使用 GLSL（OpenGL Shading Language）语言编写的定制的着色器程序，利用图形硬件加速图形渲染。

与2D绘制不同，WebGL需要先初始化着色器程序并绑定缓冲区，然后通过在网页上两个三角形之间插值来绘制复杂的场景。下面是一个简单的WebGL绘制示例，展示了如何在Canvas上绘制一个具有旋转动画的旋转立方体：

const vertexShaderSource = `
    attribute vec4 a_position;
    uniform mat4 u_matrix;
    void main() {
        gl_Position = u_matrix * a_position;
    }
`;

const fragmentShaderSource = `
    precision mediump float;
    void main() {
        gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
    }
`;

let canvas = document.getElementById("myCanvas");
let gl = canvas.getContext("webgl");

let vertexShader = gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(vertexShader, vertexShaderSource);
gl.compileShader(vertexShader);

let fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(fragmentShader, fragmentShaderSource);
gl.compileShader(fragmentShader);

let program = gl.createProgram();
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);
gl.linkProgram(program);

gl.useProgram(program);

let positionAttributeLocation = gl.getAttribLocation(program, "a_position");
let positionBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
let positions = [
  -0.5, -0.5, 0.0,
  0.5, -0.5, 0.0,
  0.5, 0.5, 0.0,
  -0.5, 0.5, 0.0
]
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions), gl.STATIC_DRAW);
gl.enableVertexAttribArray(positionAttributeLocation);
gl.vertexAttribPointer(positionAttributeLocation, 3, gl.FLOAT, false, 0, 0);

let matrixLocation = gl.getUniformLocation(program, "u_matrix");
let matrix = new Float32Array(16);
glMatrix.mat4.identity(matrix);
glMatrix.mat4.translate(matrix, matrix, [0, 0, -2]);
let angle = 0;
function render() {
  glMatrix.mat4.rotateY(matrix, matrix, angle);
  gl.uniformMatrix4fv(matrixLocation, false, matrix);
  gl.drawArrays(gl.TRIANGLE_FAN, 0, 4);
  requestAnimationFrame(render);
  angle += 0.01;
}
render();

在上述示例中，我们首先创建了一个绘制立方体的顶点着色器和片段着色器，分别用于生成顶点的位置和片段的颜色。然后，通过创建并连接这些着色器，我们构建了一个WebGL程序。接下来，我们分别创建了一个顶点缓冲区并将顶点数据绑定到缓冲区中。最后，我们根据旋转角度，通过调用gl.uniformMatrix4fv()方法设置了变换矩阵，并使用gl.drawArrays()方法进行了绘制。

通过WebGL，我们可以实现各种复杂的3D绘制效果，如光照、阴影、纹理等，可以用于游戏开发、模拟仿真等领域。

总结

Canvas是HTML5中用于绘制图形的元素，有两种主要的方式：2D绘制和WebGL绘制。2D绘制是Canvas的默认方式，通过Canvas API可以实现各种形状的绘制效果。WebGL绘制利用GPU进行硬件加速的3D绘制，可以实现复杂的图形渲染效果。根据实际需求，我们可以选择使用2D绘制或WebGL绘制来满足我们的绘图需求。无论是简单的图形绘制还是复杂的3D渲染，Canvas都提供了强大的绘图能力，为我们的网页添加了丰富的视觉效果。

需要注意的是，本文只是对Canvas默认方式的简单介绍，实际应用中还有许多细节和技巧需要进一步学习和掌握。