WebGL学习笔记

最新推荐文章于 2022-05-27 00:05:06 发布

浮生勿语

最新推荐文章于 2022-05-27 00:05:06 发布

阅读量254

点赞数

本文链接：https://blog.csdn.net/qq_36381573/article/details/83447730

版权

什么是 Canvas？

HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。

canvas类似img，是一个矩形区域，您可以控制其每一像素。

canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<canvas id="myCanvas" width="200" height="100"></canvas>
<!--<canvas id="webgl" width="500" height="500"></canvas>-->
<script>
var c=document.getElementById("myCanvas");
 var cxt=c.getContext("2d");
 cxt.fillStyle="#FF0000";
 cxt.fillRect(0,0,150,75);
</script>

效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<canvas id="webgl" width="500" height="500"></canvas>
<script src="lib.js"></script>
<script>
  var canvasElement=document.getElementById('webgl');
  var contexts=canvasElement.getContext('webgl');

  var vertexShaderSource = '' +
    'attribute vec4 apos;' +                    //将apos设置成参数
    'void main(){' +                            //顶点着色器代码
    'gl_PointSize=20.0;' +
    'gl_Position = apos;' +                    //这里也要换成apos
    '}';

  var fragShaderSource=''+
    'void main(){'+
    'gl_FragColor=vec4(1.0,0.0,0.0,1.0);'       //片元着色器代码
  +'}';
  var program=initShader(contexts,vertexShaderSource,fragShaderSource);

  var aposLocation = contexts.getAttribLocation(program,'apos');

  var x=0.0;
  var y=0.0;
  contexts.clearColor(0.2,0.3,0.5,1.0);
  contexts.clear(contexts.COLOR_BUFFER_BIT);

  for(var i=0,j=0.1;i<10;i++){
    x+=j;
    y+=j;
    contexts.vertexAttrib4f(aposLocation,x,y,0,1.0);
    contexts.drawArrays(contexts.POINTS,0,1);
  }

</script>

</body>
</html>

效果：（注意0,0是从中心点开始的）