您的位置：首页 > 其它

canvas调用webgl绘制图形图像

2017-12-07 17:32 375 查看

<!DOCTYPE html>

<html>

<head>

<meta lang="en">

<meta charset="UTF-8">

<title>WebGL study</title>

<link href="style/style.css">

<script type="text/javascript" src="js/js.js"></script>

</head>

<body>

<canvas id="canvas" width="200px" height="200px"></canvas>

</body>

<script>

/**

* Created by houbingshuai on 2016/12/3.

*/

window.onload = function () {

//顶点着色器程序

var VSHADER_SOURCE =

"void main() {" +

//设置坐标

"gl_Position = vec4(0.0, 0.0, 0.0, 1.0); " +

//设置尺寸

"gl_PointSize = 10.0; " +

"} ";

//片元着色器

var FSHADER_SOURCE =

"void main() {" +

//设置颜色

"gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);" +

"}";

//获取canvas元素

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

//获取绘制二维上下文

var gl = canvas.getContext('webgl');

if (!gl) {

console.log("Failed");

return;

}

//编译着色器

var vertShader = gl.createShader(gl.VERTEX_SHADER);

gl.shaderSource(vertShader, VSHADER_SOURCE);

gl.compileShader(vertShader);

var fragShader = gl.createShader(gl.FRAGMENT_SHADER);

gl.shaderSource(fragShader, FSHADER_SOURCE);

gl.compileShader(fragShader);

//合并程序

var shaderProgram = gl.createProgram();

gl.attachShader(shaderProgram, vertShader);

gl.attachShader(shaderProgram, fragShader);

gl.linkProgram(shaderProgram);

gl.useProgram(shaderProgram);

//绘制一个点

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

}

</script>

</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： webgl

相关文章推荐

新的分享

章节导航