<code>// wxml

<view class="container">code>

<!-- 加载地图容器 -->

<canvas type="webgl" id="testMap" style="width: 100%; height: 100%;" disable-scroll bindtouchstart="touchStart" bindtouchmove="touchMove" bindtouchend="touchEnd"></canvas>code>

</view>

Page({

data: { },

/**

* 生命周期函数--监听页面初次渲染完成

*/

onReady() {

wx.createSelectorQuery().select('#testMap')

.fields({ node: true, size: true })

.exec((res) => {

let textCanvas = res[0].node; // 重点1

let gl = textCanvas.getContext('webgl'); // 重点2

const vsSource = `

attribute vec4 aVertexPosition;

attribute vec2 aTextureCoord;

varying highp vec2 vTextureCoord;

void main(void) {

gl_Position = aVertexPosition;

vTextureCoord = aTextureCoord;

}

`;

// Fragment shader source code

const fsSource = `

varying highp vec2 vTextureCoord;

uniform sampler2D uSampler;

void main(void) {

gl_FragColor = texture2D(uSampler, vec2(vTextureCoord.x,1.0-vTextureCoord.y));

}

`;

// Initialize shaders

function initShaderProgram(gl, vsSource, fsSource) {

const vertexShader = loadShader(gl, gl.VERTEX_SHADER, vsSource);

const fragmentShader = loadShader(gl, gl.FRAGMENT_SHADER, fsSource);

const shaderProgram = gl.createProgram();

gl.attachShader(shaderProgram, vertexShader);

gl.attachShader(shaderProgram, fragmentShader);

gl.linkProgram(shaderProgram);

if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) {

alert('Unable to initialize the shader program: ' + gl.getProgramInfoLog(shaderProgram));

return null;

}

return shaderProgram;

}

function loadShader(gl, type, source) {

const shader = gl.createShader(type);

gl.shaderSource(shader, source);

gl.compileShader(shader);

if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {

alert('An error occurred compiling the shaders: ' + gl.getShaderInfoLog(shader));

gl.deleteShader(shader);

return null;

}

return shader;

}

const shaderProgram = initShaderProgram(gl, vsSource, fsSource);

const programInfo = {

program: shaderProgram,

attribLocations: {

vertexPosition: gl.getAttribLocation(shaderProgram, 'aVertexPosition'),

textureCoord: gl.getAttribLocation(shaderProgram, 'aTextureCoord'),

},

uniformLocations: {

uSampler: gl.getUniformLocation(shaderProgram, 'uSampler'),

},

};

// Initialize buffers

const positionBuffer = gl.createBuffer();

gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);

const positions = [

-1.0, 1.0,

1.0, 1.0,

-1.0, -1.0,

1.0, -1.0,

];

gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions), gl.STATIC_DRAW);

const textureCoordBuffer = gl.createBuffer();

gl.bindBuffer(gl.ARRAY_BUFFER, textureCoordBuffer);

const textureCoordinates = [

0.0, 0.0,

1.0, 0.0,

0.0, 1.0,

1.0, 1.0,

];

gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(textureCoordinates), gl.STATIC_DRAW);

// Load texture

function loadTexture(gl, cb) {

const texture = gl.createTexture();

gl.bindTexture(gl.TEXTURE_2D, texture);

const level = 0;

const internalFormat = gl.RGBA;

const srcFormat = gl.RGBA;

const srcType = gl.UNSIGNED_BYTE;

const image = textCanvas.createImage();

image.onload = function () {

gl.bindTexture(gl.TEXTURE_2D, texture);

gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true);

gl.texImage2D(gl.TEXTURE_2D, level, internalFormat, srcFormat, srcType, image);

gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);

gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);

gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);

cb();

};

image.src = 'data:image/png;base64,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';

return texture;

}

const texture = loadTexture(gl, () => {

render();

});

// Draw the scene

function drawScene(gl, programInfo, buffers, texture) {

gl.clearColor(0.0, 0.0, 0.0, 1.0);

gl.clear(gl.COLOR_BUFFER_BIT);

gl.useProgram(programInfo.program);

gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);

gl.vertexAttribPointer(programInfo.attribLocations.vertexPosition, 2, gl.FLOAT, false, 0, 0);

gl.enableVertexAttribArray(programInfo.attribLocations.vertexPosition);

gl.bindBuffer(gl.ARRAY_BUFFER, textureCoordBuffer);

gl.vertexAttribPointer(programInfo.attribLocations.textureCoord, 2, gl.FLOAT, false, 0, 0);

gl.enableVertexAttribArray(programInfo.attribLocations.textureCoord);

gl.activeTexture(gl.TEXTURE0);

gl.bindTexture(gl.TEXTURE_2D, texture);

gl.uniform1i(programInfo.uniformLocations.uSampler, 0);

gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);

}

function render() {

drawScene(gl, programInfo, { position: positionBuffer, textureCoord: textureCoordBuffer }, texture);

}

render();

})

},

})

最后效果: