昨天简单学了canvas绘图的课程，觉得有一些还是有必要大家分享的

然后的话遇到一个 问题，就是在JS代码中设置的图形到了浏览器中总是被拉伸，下面是我找到的解决方案：

图形在浏览器中被拉伸的原因是css样式在浏览器中会跟JS代码中的设置有出入，就会被拉伸（我也看得是云里雾里的），所以我们除了在css样式中设定canvas画布的样式

<canvas id="canvas" style="width:500px;height:500px"></canvas>

还要在js代码中设置，类似下面这个

context.width=500;
context.height=500;

这样的话就能够解决拉伸的问题了

昨天简单学了canvas绘图的课程，觉得有一些还是有必要大家分享的

然后的话遇到一个 问题，就是在JS代码中设置的图形到了浏览器中总是被拉伸，下面是我找到的解决方案：

图形在浏览器中被拉伸的原因是css样式在浏览器中会跟JS代码中的设置有出入，就会被拉伸（我也看得是云里雾里的），所以我们除了在css样式中设定canvas画布的样式

<canvas id="canvas" style="width:500px;height:500px"></canvas>

还要在js代码中设置，类似下面这个

context.width=500;
context.height=500;

这样的话就能够解决拉伸的问题了