java中canvas为何不起作用_Javascript Canvas渲染方法在IE11中无效

当我在除Internet Explorer 11之外的任何其他网络浏览器(最新版本的谷歌浏览器，Mozilla Firefox，Microsoft Edge和Opera)上运行此代码时，代码工作正常，但是当我在IE中运行它时，评论的行out得到“无法获取属性'[可变试图被声明]'未定义或空引用”错误 . 是否有一些修复我可以应用于此运行在IE中 . 我也在使用IE11的最新版本 . 这是我引用的代码：

Page Title

var canvas=document.querySelector('canvas');

canvas.width=window.innerWidth;

canvas.height=window.innerHeight;

var createGLProgram=function createGLProgram(gl,shaders)

{

var program=gl.createProgram();

for(var i=0;i

gl.attachShader(program,shaders[i]);

gl.linkProgram(program);

var linked=gl.getProgramParameter(program,gl.LINK_STATUS);

return program;

}

var myCreateShader=function myCreateShader(gl,shaderScriptText,shaderType)

{

var shader=gl.createShader(shaderType);

gl.shaderSource(shader,shaderScriptText);

gl.compileShader(shader);

return shader;

}

var gl=canvas.getContext("webgl",{antialias:false});

//These lines of code produce errors for IE Only

/*

var vertexShader=myCreateShader(gl,"attribute vec2 a_position;\n\n\tuniform vec2 u_resolution;\n\n\tvoid main(){\n\t\n\t\tvec2 zeroToOne=a_position/u_resolution;\n\n\t\t\n\t\tvec2 zeroToTwo=zeroToOne*2.0;\n\n\t\t\n\t\tvec2 clipSpace=zeroToTwo-1.0;\n\n\t\t\n gl_PointSize=1.0;\n\t\tgl_Position=vec4(clipSpace*vec2(1,-1),0,1);\n\t}",gl.VERTEX_SHADER);

var fragmentShader=myCreateShader(gl,"precision mediump float;\n\n\tuniform vec4 u_color;\n\n\tvoid main(){\n\tgl_FragColor=u_color;\n\t}",gl.FRAGMENT_SHADER);

*/

//Ignore these lines. Don't function b/c lines above aren't defining what is needed here

/*

var program=createGLProgram(gl,[vertexShader,fragmentShader]);

gl.useProgram(program);

*/

//A continuation of the lines of code produce errors for IE Only, any other ones commented as well

/*

var colorLocation=gl.getUniformLocation(program,"u_color");

var positionLocation=gl.getAttribLocation(program,"a_position");

var resolutionLocation=gl.getUniformLocation(program,"u_resolution");

gl.uniform2f(resolutionLocation,canvas.width,canvas.height);

var buffer=gl.createBuffer();

gl.bindBuffer(gl.ARRAY_BUFFER,buffer);

gl.enableVertexAttribArray(positionLocation);

gl.enableVertexAttribArray(positionLocation);

gl.vertexAttribPointer(positionLocation,2,gl.FLOAT,false,0,0);

*/

PixelColor('#FF00FF');

function PixelColor(HexValue)

{

//gl.uniform4f(colorLocation,parseInt(HexValue.slice(1,3),16),parseInt(HexValue.slice(3,5),16),parseInt(HexValue.slice(5,7),16),1);

}

function drawOneBlackPixel(gl,x,y)

{

//gl.bufferData(gl.ARRAY_BUFFER,new Float32Array([x+0.5,y+0.5]),gl.STATIC_DRAW);

//gl.drawArrays(gl.POINTS,0,1);

}

//gl.clearColor(1,1,1,1);

//gl.clear(gl.COLOR_BUFFER_BIT);

drawOneBlackPixel(gl,0,0);

drawOneBlackPixel(gl,1,1);

drawOneBlackPixel(gl,2,2);

drawOneBlackPixel(gl,3,3);

drawOneBlackPixel(gl,4,4);