Rumah > Artikel > hujung hadapan web > Kuasai pelaksanaan dan prinsip kerja mod pemaparan Kanvas
Kuasai pelaksanaan dan prinsip kerja mod pemaparan Kanvas
- 王林asal
- 2024-01-17 08:40:151254semak imbas
Memahami prinsip dan pelaksanaan mod pemaparan Kanvas memerlukan contoh kod khusus
Pertama sekali, kami perlu menjelaskan dengan jelas bahawa Canvas ialah API lukisan yang disediakan oleh HTML5, yang membolehkan kami menggunakan JavaScript dalam penyemak imbas untuk melukis grafik, animasi dan kesan visual yang lain . Kanvas boleh dilukis menggunakan dua mod pemaparan: mod pemaparan 2D dan mod pemaparan WebGL.
Mod pemaparan 2D ialah mod lalai Kanvas, yang menggunakan konteks 2D elemen Kanvas dalam HTML5 untuk melukis grafik. Dalam mod pemaparan 2D, kita boleh menggunakan satu siri kaedah untuk melukis grafik, seperti melukis segi empat tepat, bulatan, laluan, dsb.
Berikut ialah contoh melukis segi empat tepat menggunakan mod pemaparan 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>Mod pemaparan WebGL ialah perpustakaan grafik berprestasi tinggi berdasarkan OpenGL ES, yang boleh dijalankan pada GPU untuk mencapai pemaparan grafik yang lebih kompleks dan lebih pantas. Mod rendering WebGL menyediakan program shader untuk melukis grafik, dan kami boleh menulis kod shader menggunakan bahasa GLSL.
Berikut ialah contoh melukis segi empat tepat menggunakan mod pemaparan 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>Di atas ialah contoh melukis segi empat tepat menggunakan mod pemaparan WebGL, yang menggunakan pelorek bucu dan pelorek serpihan untuk pemaparan grafik dan menggunakan penimbal Untuk menyimpan data puncak graf.
Ringkasnya, prinsip dan pelaksanaan mod pemaparan Kanvas termasuk mod pemaparan 2D dan mod pemaparan WebGL. Mod pemaparan 2D menggunakan konteks 2D untuk melukis grafik, manakala mod pemaparan WebGL ialah perpustakaan grafik berprestasi tinggi berdasarkan OpenGL ES yang boleh dijalankan pada GPU untuk mencapai pemaparan grafik yang lebih kompleks dan lebih pantas. Dalam aplikasi sebenar, kami memilih untuk menggunakan mod rendering 2D atau mod rendering WebGL untuk melukis grafik mengikut keperluan.
Atas ialah kandungan terperinci Kuasai pelaksanaan dan prinsip kerja mod pemaparan Kanvas. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!