WebGL第三课：画点（一）-准备纸笔目标：在屏幕中间，画一个半径是1的圆。上面的代码就是一个简单的网页，关于网页的基

本文标题：WebGL第三课：画点（一）-准备纸笔

从现在开始，我们为了满足大家想要进行实践的冲动，所以开始真正写代码了： 目标：在屏幕中间，画一个半径是1的圆。

纸，一个canvas标签

<!doctype html>
<html>

<body>
    <canvas id="point" style="width:300px; height:300px">
    </canvas>
    <script>
        var pointCanvas = document.getElementById('point');
        // pointCanvas 就是我们的必需品-纸
    </script>

</body>

</html>

上面的代码就是一个简单的网页，关于网页的基本知识不属于本课程的范畴，请大家自行研究啊。
一个 canvas 标签，就好像，我们在桌面上铺好了一张纸。

笔，在纸的基础上生成一个笔

<!doctype html>
<html>

<body>
    <canvas id="point" style="width:300px; height:300px">
    </canvas>
    <script>
        var pointCanvas = document.getElementById('point');
        var pen = pointCanvas.getContext('webgl', { preserveDrawingBuffer: true });
        // pen 就是笔了
    </script>

</body>

</html>

pen 这个变量就是笔的抽象。此时，这个 pen 就可以在 pointCanvas 这张纸来作图了。
我们先来看一下这张纸（pointCanvas）：
<canvas id="point" style="width:300px; height:300px">
我们发现他的宽是300px，高也是300px。此时，手速比较快的小伙伴，应该已经将上面的网页在浏览器中运行起来了，会发现，茫然一片白。
啥也没有！哦，好的，我们啥也没画，啥也看不见，好吧，写一点 css 吧，至少让这个纸能够显现出来。

<!doctype html>
<html>

<head>
    <style>
        canvas {
            border: 1px solid #000000;
        }
    </style>
</head>

<body>
    <canvas id="point" style="width:300px; height:300px">
    </canvas>
    <script>
        var pointCanvas = document.getElementById('point');
        var pen = pointCanvas.getContext('webgl', { preserveDrawingBuffer: true });
    </script>

</body>

</html>

好的，现在让这个 html 在网页中跑起来，应该可以看见一个黑色的边框了，这就是我们的第一张纸，我们即将在这张纸上开始我们伟大的艺术之旅。

本文正文结束，以下是答疑部分

小瓜瓜问：怎么运行这个网页？

答：这个应该问一问你所认识的 前端小伙伴。不过一个简单的做法就是，将上面的代码保存成 index.html 的文件，然后直接拖到浏览器里。但是正规的做法还是要启动一个HTTP静态文件服务，然后在浏览器里输入本地的地址。这里推荐一个 lite-server，使用node的同学应该很熟悉这个了，我就不赘述了。