cdom = document.createElement('canvas'); cdom.width = 200; cdom.height = 50; c2d = cdom.getContext('2d'); c2d.textBaseline = 'top'; c2d.font = "18px 'Arial'"; c2d.fillStyle = '#f82'; c2d.fillRect(0, 0, 100, 30); c2d.fillStyle = '#17e'; c2d.fillText("ActiveXObject", 3, 16); c2d.fillStyle = 'rgba(240,110,53,0.4)'; c2d.fillText("ActiveXObject", 5, 18); cdom.toDataURL();
// 创建canvas元素 cdom = document.createElement('canvas'); // 创建 WebGL 上下文 gl = cdom.getContext('webgl'); // 创建缓冲区 buffer = gl.createBuffer(); // 绑定缓冲区到指定的类型 gl.bindBuffer(gl.ARRAY_BUFFER, buffer); // 创建一个长度为 36 的 ArrayBuffer 对象 b36 = new ArrayBuffer(36); // 创建一个 Float32Array 对象，使用指定的 ArrayBuffer 对象作为底层实现 arr1 = new Float32Array(b36); // 定义一个包含顶点坐标信息的一维数组 t_1 = [-0.20000000298023224, -0.8999999761581421, 0.4000000059604645, -0.25999999046325684, 0, 0.8132645487785339, 0]; // 将 t_1 数组的元素赋值给 arr1 数组 for (let i = 0; i < t_1.length; i++) { arr1[i] = t_1[i]; } // 将数组数据绑定到缓冲区 gl.bufferData(gl.ARRAY_BUFFER, arr1, gl.STATIC_DRAW); // 设置缓冲区的 item 大小 buffer.itemSize = 3; // 设置缓冲区的项数 buffer.numItems = 3; // 创建着色器程序 program = gl.createProgram(); // 创建顶点着色器 vertexShader = gl.createShader(gl.VERTEX_SHADER); // 设置顶点着色器的源代码 gl.shaderSource(vertexShader,"attribute vec2 attrVertex;varying vec2 varyinTexCoordinate;uniform vec2 uniformOffset;void main(){varyinTexCoordinate=attrVertex+uniformOffset;gl_Position=vec4(attrVertex,0,1);}"); // 编译顶点着色器 gl.compileShader(vertexShader); // 创建片元着色器 fragmentShader = gl.createShader(gl.FRAGMENT_SHADER); // 修正此处 // 设置片元着色器的源代码 gl.shaderSource(fragmentShader, "precision mediump float;varying vec2 varyinTexCoordinate;void main() {gl_FragColor=vec4(varyinTexCoordinate,0,1);}"); // 编译片元着色器 gl.compileShader(fragmentShader); // 将着色器附加到着色器程序上 gl.attachShader(program, vertexShader); gl.attachShader(program, fragmentShader); // 链接着色器程序 gl.linkProgram(program); // 使用着色器程序 gl.useProgram(program); // 获取顶点位置属性的位置 program.vertexPosAttrib = gl.getAttribLocation(program, "attrVertex"); // 获取 uniformOffset 局部变量的位置 program.offsetUniform = gl.getUniformLocation(program, 'uniformOffset'); // 启用顶点位置属性 gl.enableVertexAttribArray(program.vertexPosArray) // 将缓冲区数据绑定到顶点位置属性 gl.vertexAttribPointer(program.vertexPosAttrib, buffer.itemSize, gl.FLOAT, false, 0, 0); // 设置 uniformOffset 的值 gl.uniform2f(program.offsetUniform, 1, 1) // 绘制图形 gl.drawArrays(gl.TRIANGLE_STRIP, 0, buffer.numItems); // 将画布转换为数据 URL gl.canvas.toDataURL();
all_s_e = gl.getSupportedExtensions(); // 获取支持的扩展列表 for (let ons of all_s_e) { // 遍历扩展列表 console.log(ons); // 打印扩展名称 let a1 = gl.getExtension(ons); // 获取扩展对象 let b1 = Object.getOwnPropertyDescriptors(a1.__proto__); // 获取扩展对象的原型属性 for (let onb in b1) { // 遍历原型属性 b1[onb].configurable // 检查属性是否可配置 if (!b1[onb].configurable){ // 如果不可配置 console.log('属性:',onb,'|||值:',b1[onb].value) // 打印属性名称和属性值 } } } debugger; // 断点 shaderPrecisionFormat = gl.getShaderPrecisionFormat(gl.VERTEX_SHADER,gl.HIGH_FLOAT); // 获取顶点着色器的高精度精度格式 console.log('(',gl.VERTEX_SHADER,gl.HIGH_FLOAT,')---',shaderPrecisionFormat.rangeMin,'|||',shaderPrecisionFormat.rangeMax,'|||',shaderPrecisionFormat.precision); // 打印精度格式的范围最小值、范围最大值和精度 shaderPrecisionFormat = gl.getShaderPrecisionFormat(gl.VERTEX_SHADER,gl.MEDIUM_FLOAT); // 获取顶点着色器的中等精度精度格式 console.log('(',gl.VERTEX_SHADER,gl.MEDIUM_FLOAT,')---',shaderPrecisionFormat.rangeMin,'|||',shaderPrecisionFormat.rangeMax,'|||',shaderPrecisionFormat.precision); // 打印精度格式的范围最小值、范围最大值和精度 shaderPrecisionFormat = gl.getShaderPrecisionFormat(gl.VERTEX_SHADER,gl.LOW_FLOAT); // 获取顶点着色器的低精度精度格式 console.log('(',gl.VERTEX_SHADER,gl.LOW_FLOAT,')---',shaderPrecisionFormat.rangeMin,'|||',shaderPrecisionFormat.rangeMax,'|||',shaderPrecisionFormat.precision); // 打印精度格式的范围最小值、范围最大值和精度 shaderPrecisionFormat = gl.getShaderPrecisionFormat(gl.VERTEX_SHADER,gl.HIGH_INT); // 获取顶点着色器的高精度整数精度格式 console.log('(',gl.VERTEX_SHADER,gl.HIGH_INT,')---',shaderPrecisionFormat.rangeMin,'|||',shaderPrecisionFormat.rangeMax,'|||',shaderPrecisionFormat.precision); // 打印精度格式的范围最小值、范围最大值和精度 shaderPrecisionFormat = gl.getShaderPrecisionFormat(gl.VERTEX_SHADER,gl.MEDIUM_INT); // 获取顶点着色器的中等精度整数精度格式 console.log('(',gl.VERTEX_SHADER,gl.MEDIUM_INT,')---',shaderPrecisionFormat.rangeMin,'|||',shaderPrecisionFormat.rangeMax,'|||',shaderPrecisionFormat.precision); // 打印精度格式的范围最小值、范围最大值和精度 shaderPrecisionFormat = gl.getShaderPrecisionFormat(gl.VERTEX_SHADER,gl.LOW_INT); // 获取顶点着色器的低精度整数精度格式 console.log('(',gl.VERTEX_SHADER,gl.LOW_INT,')---',shaderPrecisionFormat.rangeMin,'|||',shaderPrecisionFormat.rangeMax,'|||',shaderPrecisionFormat.precision); // 打印精度格式的范围最小值、范围最大值和精度 shaderPrecisionFormat = gl.getShaderPrecisionFormat(gl.VERTEX_SHADER,gl.HIGH_FLOAT); // 获取顶点着色器的高精度精度格式 console.log('(',gl.VERTEX_SHADER,gl.HIGH_FLOAT,')---',shaderPrecisionFormat.rangeMin,'|||',shaderPrecisionFormat.rangeMax,'|||',shaderPrecisionFormat.precision); // 打印精度格式的范围最小值、范围最大值和精度 shaderPrecisionFormat = gl.getShaderPrecisionFormat(gl.FRAGMENT_SHADER,gl.HIGH_FLOAT); // 获取片段着色器的高精度精度格式 console.log('(',gl.FRAGMENT_SHADER,gl.HIGH_FLOAT,')---',shaderPrecisionFormat.rangeMin,'|||',shaderPrecisionFormat.rangeMax,'|||',shaderPrecisionFormat.precision); // 打印精度格式的范围最小值、范围最大值和精度 shaderPrecisionFormat = gl.getShaderPrecisionFormat(gl.FRAGMENT_SHADER,gl.MEDIUM_FLOAT); // 获取片段着色器的中等精度精度格式 console.log('(',gl.FRAGMENT_SHADER,gl.MEDIUM_FLOAT,')---',shaderPrecisionFormat.rangeMin,'|||',shaderPrecisionFormat.rangeMax,'|||',shaderPrecisionFormat.precision); // 打印精度格式的范围最小值、范围最大值和精度 shaderPrecisionFormat = gl.getShaderPrecisionFormat(gl.FRAGMENT_SHADER,gl.LOW_FLOAT); // 获取片段着色器的低精度精度格式 console.log('(',gl.FRAGMENT_SHADER,gl.LOW_FLOAT,')---',shaderPrecisionFormat.rangeMin,'|||',shaderPrecisionFormat.rangeMax,'|||',shaderPrecisionFormat.precision); // 打印精度格式的范围最小值、范围最大值和精度 shaderPrecisionFormat = gl.getShaderPrecisionFormat(gl.FRAGMENT_SHADER,gl.HIGH_INT); // 获取片段着色器的高精度整数精度格式 console.log('(',gl.FRAGMENT_SHADER,gl.HIGH_INT,')---',shaderPrecisionFormat.rangeMin,'|||',shaderPrecisionFormat.rangeMax,'|||',shaderPrecisionFormat.precision); // 打印精度格式的范围最小值、范围最大值和精度 shaderPrecisionFormat = gl.getShaderPrecisionFormat(gl.FRAGMENT_SHADER,gl.MEDIUM_INT); // 获取片段着色器的中等精度整数精度格式 console.log('(',gl.FRAGMENT_SHADER,gl.MEDIUM_INT,')---',shaderPrecisionFormat.rangeMin,'|||',shaderPrecisionFormat.rangeMax,'|||',shaderPrecisionFormat.precision); // 打印精度格式的范围最小值、范围最大值和精度 shaderPrecisionFormat = gl.getShaderPrecisionFormat(gl.FRAGMENT_SHADER,gl.LOW_INT); // 获取片段着色器的低精度整数精度格式 console.log('(',gl.FRAGMENT_SHADER,gl.LOW_INT,')---',shaderPrecisionFormat.rangeMin,'|||',shaderPrecisionFormat.rangeMax,'|||',shaderPrecisionFormat.precision); // 打印精度格式的范围最小值、范围最大值和精度