复合canvas叠加显示
Posted 李雷
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了复合canvas叠加显示相关的知识，希望对你有一定的参考价值。
<!-- Licensed under a BSD license. See license.html for license --> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes"> <title>WebGL - Fundamentals</title> <style> #c { background-color: #fff; border: 1px solid black; position: absolute; left: 100px; top: 100px; /* NOTE: This size is changed if in iframe - see below ‘.iframe canvas‘ */ width: 400px; height: 300px; display: block; } #c2 { background-color: transparent; border: 1px solid black; position: absolute; left: 100px; top: 100px; /* NOTE: This size is changed if in iframe - see below ‘.iframe canvas‘ */ width: 400px; height: 300px; display: block; } #c3 { background-color: transparent; border: 1px solid black; position: absolute; left: 100px; top: 100px; /* NOTE: This size is changed if in iframe - see below ‘.iframe canvas‘ */ width: 400px; height: 300px; display: block; } #c4 { background-color: transparent; border: 1px solid black; position: absolute; left: 100px; top: 100px; /* NOTE: This size is changed if in iframe - see below ‘.iframe canvas‘ */ width: 400px; height: 300px; display: block; } </style> </head> <body> <canvas id="c"></canvas> <canvas id="c2"></canvas><canvas id="c3"></canvas><canvas id="c4"></canvas> </body> </html> <!-- for most samples webgl-utils only provides shader compiling/linking and canvas resizing because why clutter the examples with code that‘s the same in every sample. See http://webglfundamentals.org/webgl/lessons/webgl-boilerplate.html and http://webglfundamentals.org/webgl/lessons/webgl-resizing-the-canvas.html for webgl-utils, m3, m4, and webgl-lessons-ui. --> <script src="resources/webgl-utils.js"></script> <script src="resources/webgl-lessons-helper.js"></script> <!-- you can and should delete this script. it is only used on the site to help with errors --> <script id="2d-vertex-shader" type="notjs"> // an attribute will receive data from a buffer attribute vec4 a_position; varying vec4 v_color; uniform vec2 u_scale; // all shaders have a main function void main() { // gl_Position is a special variable a vertex shader // is responsible for setting gl_Position = a_position * vec4(u_scale,1,1); gl_PointSize = 10.0; v_color = gl_Position * vec4(1,1,0.5,1); } </script> <script id="2d-vertex-shader2" type="notjs"> // an attribute will receive data from a buffer attribute vec4 a_position; varying vec4 v_color; uniform vec2 u_scale; // all shaders have a main function void main() { // gl_Position is a special variable a vertex shader // is responsible for setting gl_Position = a_position * vec4(u_scale,1,1); gl_PointSize = 10.0; v_color = gl_Position * vec4(1,1,0.5,1); } </script> <script id="2d-fragment-shader" type="notjs"> // fragment shaders don‘t have a default precision so we need // to pick one. mediump is a good default precision mediump float; varying vec4 v_color; void main() { // gl_FragColor is a special variable a fragment shader // is responsible for setting //gl_FragColor = vec4(0, 0, 1, 1); // return redish-purple gl_FragColor = v_color; } </script> <script id="2d-fragment-shader2" type="notjs"> // fragment shaders don‘t have a default precision so we need // to pick one. mediump is a good default precision mediump float; varying vec4 v_color; void main() { // gl_FragColor is a special variable a fragment shader // is responsible for setting gl_FragColor = vec4(0, 0, 1, 1); // return redish-purple //gl_FragColor = v_color; } </script> <script> "use strict"; function createShader(gl, type, source) { var shader = gl.createShader(type); gl.shaderSource(shader, source); gl.compileShader(shader); var success = gl.getShaderParameter(shader, gl.COMPILE_STATUS); if (success) { return shader; } console.log(gl.getShaderInfoLog(shader)); gl.deleteShader(shader); } function createProgram(gl, vertexShader, fragmentShader) { var program = gl.createProgram(); gl.attachShader(program, vertexShader); gl.attachShader(program, fragmentShader); gl.linkProgram(program); var success = gl.getProgramParameter(program, gl.LINK_STATUS); if (success) { return program; } console.log(gl.getProgramInfoLog(program)); gl.deleteProgram(program); } function main() { // Get A WebGL context var canvas = document.getElementById("c"); var gl = canvas.getContext("webgl"); if (!gl) { return; } var scale_x = 1; var scale_y = 1; // Get the strings for our GLSL shaders var vertexShaderSource = document.getElementById("2d-vertex-shader").text; var fragmentShaderSource = document.getElementById("2d-fragment-shader").text; // create GLSL shaders, upload the GLSL source, compile the shaders var vertexShader = createShader(gl, gl.VERTEX_SHADER, vertexShaderSource); console.log(vertexShader) var fragmentShader = createShader(gl, gl.FRAGMENT_SHADER, fragmentShaderSource); // Link the two shaders into a program var program = createProgram(gl, vertexShader, fragmentShader); // Create a buffer and put three 2d clip space points in it var positionBuffer = gl.createBuffer(); // Bind it to ARRAY_BUFFER (think of it as ARRAY_BUFFER = positionBuffer) gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer); var ps = [] var positions = [ 0, 0, 0, 0.8, 0.7, 0, ]; ps.push(positions); gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions), gl.STATIC_DRAW); // code above this line is initialization code. // code below this line is rendering code. webglUtils.resizeCanvasToDisplaySize(gl.canvas); // Tell WebGL how to convert from clip space to pixels gl.viewport(0, 0, gl.canvas.width, gl.canvas.height); // Clear the canvas gl.clearColor(0, 0, 0, 0); gl.clear(gl.COLOR_BUFFER_BIT); // Tell it to use our program (pair of shaders) gl.useProgram(program); // look up where the vertex data needs to go. var positionAttributeLocation = gl.getAttribLocation(program, "a_position"); // Turn on the attribute gl.enableVertexAttribArray(positionAttributeLocation); // Bind the position buffer. //gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer); // Tell the attribute how to get data out of positionBuffer (ARRAY_BUFFER) var size = 2; // 2 components per iteration var type = gl.FLOAT; // the data is 32bit floats var normalize = false; // don‘t normalize the data var stride = 0; // 0 = move forward size * sizeof(type) each iteration to get the next position var offset = 0; // start at the beginning of the buffer gl.vertexAttribPointer( positionAttributeLocation, size, type, normalize, stride, offset) // look up uniform locations var resolutionUniformLocation = gl.getUniformLocation(program, "u_scale"); gl.uniform2f(resolutionUniformLocation, scale_x, scale_y); // draw //POINTS //LINES //LINE_LOOP //LINE_STRIP //TRIANGLES var primitiveType = gl.LINE_STRIP; var offset = 0; var count = 3; gl.drawArrays(primitiveType, offset, count); } main(); function main2() { // Get A WebGL context var canvas = document.getElementById("c2"); var gl = canvas.getContext("webgl"); if (!gl) { return; } var scale_x = 1; var scale_y = 1; // Get the strings for our GLSL shaders var vertexShaderSource = document.getElementById("2d-vertex-shader").text; var fragmentShaderSource = document.getElementById("2d-fragment-shader").text; // create GLSL shaders, upload the GLSL source, compile the shaders var vertexShader = createShader(gl, gl.VERTEX_SHADER, vertexShaderSource); console.log(vertexShader) var fragmentShader = createShader(gl, gl.FRAGMENT_SHADER, fragmentShaderSource); // Link the two shaders into a program var program = createProgram(gl, vertexShader, fragmentShader); // Create a buffer and put three 2d clip space points in it var positionBuffer = gl.createBuffer(); // Bind it to ARRAY_BUFFER (think of it as ARRAY_BUFFER = positionBuffer) gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer); var ps = [] var positions = [ 0, 0, 0, -0.8, 0.7, 0, ]; ps.push(positions); gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions), gl.STATIC_DRAW); // code above this line is initialization code. // code below this line is rendering code. webglUtils.resizeCanvasToDisplaySize(gl.canvas); // Tell WebGL how to convert from clip space to pixels gl.viewport(0, 0, gl.canvas.width, gl.canvas.height); // Clear the canvas gl.clearColor(0, 0, 0, 0); gl.clear(gl.COLOR_BUFFER_BIT); // Tell it to use our program (pair of shaders) gl.useProgram(program); // look up where the vertex data needs to go. var positionAttributeLocation = gl.getAttribLocation(program, "a_position"); // Turn on the attribute gl.enableVertexAttribArray(positionAttributeLocation); // Bind the position buffer. //gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer); // Tell the attribute how to get data out of positionBuffer (ARRAY_BUFFER) var size = 2; // 2 components per iteration var type = gl.FLOAT; // the data is 32bit floats var normalize = false; // don‘t normalize the data var stride = 0; // 0 = move forward size * sizeof(type) each iteration to get the next position var offset = 0; // start at the beginning of the buffer gl.vertexAttribPointer( positionAttributeLocation, size, type, normalize, stride, offset) // look up uniform locations var resolutionUniformLocation = gl.getUniformLocation(program, "u_scale"); gl.uniform2f(resolutionUniformLocation, scale_x, scale_y); // draw //POINTS //LINES //LINE_LOOP //LINE_STRIP //TRIANGLES var primitiveType = gl.TRIANGLES; var offset = 0; var count = 3; gl.drawArrays(primitiveType, offset, count); } main2(); function main3() { // Get A WebGL context var canvas = document.getElementById("c3"); var gl = canvas.getContext("webgl"); if (!gl) { return; } var scale_x = 1; var scale_y = 1; // Get the strings for our GLSL shaders var vertexShaderSource = document.getElementById("2d-vertex-shader").text; var fragmentShaderSource = document.getElementById("2d-fragment-shader").text; // create GLSL shaders, upload the GLSL source, compile the shaders var vertexShader = createShader(gl, gl.VERTEX_SHADER, vertexShaderSource); console.log(vertexShader) var fragmentShader = createShader(gl, gl.FRAGMENT_SHADER, fragmentShaderSource); // Link the two shaders into a program var program = createProgram(gl, vertexShader, fragmentShader); // Create a buffer and put three 2d clip space points in it var positionBuffer = gl.createBuffer(); // Bind it to ARRAY_BUFFER (think of it as ARRAY_BUFFER = positionBuffer) gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer); var ps = [] var positions = [ 0, 0, 0, -0.8, -0.7, 0, ]; ps.push(positions); gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions), gl.STATIC_DRAW); // code above this line is initialization code. // code below this line is rendering code. webglUtils.resizeCanvasToDisplaySize(gl.canvas); // Tell WebGL how to convert from clip space to pixels gl.viewport(0, 0, gl.canvas.width, gl.canvas.height); // Clear the canvas gl.clearColor(0, 0, 0, 0); gl.clear(gl.COLOR_BUFFER_BIT); // Tell it to use our program (pair of shaders) gl.useProgram(program); // look up where the vertex data needs to go. var positionAttributeLocation = gl.getAttribLocation(program, "a_position"); // Turn on the attribute gl.enableVertexAttribArray(positionAttributeLocation); // Bind the position buffer. //gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer); // Tell the attribute how to get data out of positionBuffer (ARRAY_BUFFER) var size = 2; // 2 components per iteration var type = gl.FLOAT; // the data is 32bit floats var normalize = false; // don‘t normalize the data var stride = 0; // 0 = move forward size * sizeof(type) each iteration to get the next position var offset = 0; // start at the beginning of the buffer gl.vertexAttribPointer( positionAttributeLocation, size, type, normalize, stride, offset) // look up uniform locations var resolutionUniformLocation = gl.getUniformLocation(program, "u_scale"); gl.uniform2f(resolutionUniformLocation, scale_x, scale_y); // draw //POINTS //LINES //LINE_LOOP //LINE_STRIP //TRIANGLES var primitiveType = gl.LINE_STRIP; var offset = 0; var count = 3; gl.drawArrays(primitiveType, offset, count); } main3(); function main4() { // Get A WebGL context var canvas = document.getElementById("c4"); var gl = canvas.getContext("webgl"); if (!gl) { return; } var scale_x = 1; var scale_y = 1; // Get the strings for our GLSL shaders var vertexShaderSource = document.getElementById("2d-vertex-shader").text; var fragmentShaderSource = document.getElementById("2d-fragment-shader").text; // create GLSL shaders, upload the GLSL source, compile the shaders var vertexShader = createShader(gl, gl.VERTEX_SHADER, vertexShaderSource); console.log(vertexShader) var fragmentShader = createShader(gl, gl.FRAGMENT_SHADER, fragmentShaderSource); // Link the two shaders into a program var program = createProgram(gl, vertexShader, fragmentShader); // Create a buffer and put three 2d clip space points in it var positionBuffer = gl.createBuffer(); // Bind it to ARRAY_BUFFER (think of it as ARRAY_BUFFER = positionBuffer) gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer); var ps = [] var positions = [ 0, 0, 0, 0.8, -0.7, 0, ]; ps.push(positions); gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions), gl.STATIC_DRAW); // code above this line is initialization code. // code below this line is rendering code. webglUtils.resizeCanvasToDisplaySize(gl.canvas); // Tell WebGL how to convert from clip space to pixels gl.viewport(0, 0, gl.canvas.width, gl.canvas.height); // Clear the canvas gl.clearColor(0, 0, 0, 0); gl.clear(gl.COLOR_BUFFER_BIT); // Tell it to use our program (pair of shaders) gl.useProgram(program); // look up where the vertex data needs to go. var positionAttributeLocation = gl.getAttribLocation(program, "a_position"); // Turn on the attribute gl.enableVertexAttribArray(positionAttributeLocation); // Bind the position buffer. //gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer); // Tell the attribute how to get data out of positionBuffer (ARRAY_BUFFER) var size = 2; // 2 components per iteration var type = gl.FLOAT; // the data is 32bit floats var normalize = false; // don‘t normalize the data var stride = 0; // 0 = move forward size * sizeof(type) each iteration to get the next position var offset = 0; // start at the beginning of the buffer gl.vertexAttribPointer( positionAttributeLocation, size, type, normalize, stride, offset) // look up uniform locations var resolutionUniformLocation = gl.getUniformLocation(program, "u_scale"); gl.uniform2f(resolutionUniformLocation, scale_x, scale_y); // draw //POINTS //LINES //LINE_LOOP //LINE_STRIP //TRIANGLES var primitiveType = gl.TRIANGLES; var offset = 0; var count = 3; gl.drawArrays(primitiveType, offset, count); var flag = false; document.onclick = function(){ if (!flag){ gl.clearColor(0, 0, 0, 0); gl.clear(gl.COLOR_BUFFER_BIT); flag = true; }else{ gl.drawArrays(primitiveType, offset, count); flag = false; } } } main4(); </script>
以上是关于复合canvas叠加显示的主要内容，如果未能解决你的问题，请参考以下文章