WebGL | CSS样式对Canvas的影响（模糊）

1. 问题描述

最近在倒腾WebGL，准备搞个“大新闻”.jpg！因为需要设计一个网页，并用WebGL进行绘图，所以会对Canvas元素（WebGL绘图所需的画板）进行样式调整，而大多数WebGL教程都没有额外对Canvas元素进行样式设置，一般都是这样的：

<canvas id="webgl" width="600px" height="600px"></canvas>

所以在自己调试的时候，把这些CSS样式统统都放进了外部的样式文件，然后用canvas标签进行筛选，从而进行样式设置，比如下面这样：

<style>
    canvas {
        float: left;
        width: 600px;
        height: 600px;
        border: 1px solid grey;
    }
</style>

<canvas id="webgl" ></canvas>

但是这样会有一个问题：画出来的图形是自带马赛克效果：

经过多次尝试，解决这个问题需要把设置width和height的参数放在canvas标签里面，即宽高在标签里面设置，其他样式可以引入外部CSS样式：

<style>
    canvas {
        float: left;
        border: 1px solid grey;
    }
</style>

<canvas id="webgl" width="600px" height="600px"></canvas>

通过这样的设置，就可以得到正常的显示效果：

这点有点小坑，如果有遇到有相似问题的童鞋，可以尝试这样去解决问题哦~

2. 免责声明

※ 本文之中如有错误和不准确的地方，欢迎大家指正哒~
※ 此项目仅用于学习交流，请不要用于任何形式的商用用途，谢谢呢；

---