在JavaScript中，我们可以通过获取canvas元素的上下文（context）对象来进行绘图。canvas元素的上下文对象有两种：2D和WebGL。
2D绘图是canvas最基本的绘图方式，它提供了许多绘图方法，如绘制矩形、圆形、文本等。
获取canvas元素的上下文对象：
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
绘制一个矩形：
ctx.fillStyle = '#FF0000'; // 设置矩形的填充颜色
ctx.fillRect(10, 10, 100, 100); // 绘制矩形，参数分别为x、y、宽度、高度
绘制一个圆形：
ctx.beginPath(); // 开始绘制路径
ctx.arc(75, 75, 50, 0, Math.PI * 2); // 绘制圆形，参数分别为圆心的x、y坐标、半径、起始角度、终止角度
ctx.fillStyle = '#FF0000'; // 设置圆形的填充颜色
ctx.fill(); // 填充圆形
绘制文本：
ctx.font = '30px Arial'; // 设置字体大小和样式
ctx.fillStyle = '#000000'; // 设置文本的颜色
ctx.fillText('Hello World', 10, 50); // 绘制文本，参数分别为文本内容、x、y坐标
WebGL是基于OpenGL ES的3D绘图技术，它可以在canvas元素中进行高性能的3D绘图。
获取canvas元素的上下文对象：
const canvas = document.getElementById('myCanvas');
const gl = canvas.getContext('webgl');
WebGL绘图需要使用着色器（shader）来进行渲染。着色器是运行在GPU上的程序，它可以对图形进行复杂的计算和处理。
以下是一个简单的着色器程序，它将所有的顶点都设置为红色：
const vertexShaderSource = `
attribute vec4 a_position;
void main() {
gl_Position = a_position;
}
`;
const fragmentShaderSource = `
precision mediump float;
void main() {
gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
}
`;
创建着色器：
function createShader(gl, type, source) {
const shader = gl.createShader(type); // 创建着色器对象
gl.shaderSource(shader, source); // 设置着色器代码
gl.compileShader(shader); // 编译着色器
if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
console.error('An error occurred compiling the shaders: ' + gl.getShaderInfoLog(shader));
gl.deleteShader(shader);
return null;
}
return shader;
}
const vertexShader = createShader(gl, gl.VERTEX_SHADER, vertexShaderSource);
const fragmentShader = createShader(gl, gl.FRAGMENT_SHADER, fragmentShaderSource);
创建着色器程序：
function createProgram(gl, vertexShader, fragmentShader) {
const program = gl.createProgram(); // 创建着色器程序对象
gl.attachShader(program, vertexShader); // 添加顶点着色器
gl.attachShader(program, fragmentShader); // 添加片元着色器
gl.linkProgram(program); // 链接着色器程序
if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
console.error('Unable to initialize the shader program: ' + gl.getProgramInfoLog(program));
return null;
}
return program;
}
const program = createProgram(gl, vertexShader, fragmentShader);
绑定着色器程序：
gl.useProgram(program);
绘制一个三角形：
const positionAttributeLocation = gl.getAttribLocation(program, 'a_position'); // 获取顶点属性位置
const positionBuffer = gl.createBuffer(); // 创建顶点缓冲区
gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer); // 绑定缓冲区
const 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); // 设置顶点属性数据
gl.drawArrays(gl.TRIANGLES, 0, 3); // 绘制三角形