canvas画矩形时出现边框样式不一致如何解决

本文小编为大家详细介绍“canvas画矩形时出现边框样式不一致如何解决”，内容详细，步骤清晰，细节处理妥当，希望这篇“canvas画矩形时出现边框样式不一致如何解决”文章能帮助大家解决疑惑，下面跟着小编的思路慢慢深入，一起来学习新知识吧。

先附上HTML5画矩形的的代码：

代码如下:

<canvas id="myCanvas" width="578" height="200"></canvas>

<script>

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

var context = canvas.getContext('2d');

context.beginPath();

context.rect(188.0, 50, 200, 100.375);

context.fillStyle = 'white';

context.fill();

context.lineWidth = 1;

context.strokeStyle = 'red';

context.stroke();

</script>

你会发现执行后边框样式不一样，明显底部很细。颜色也略有不同

把context.rect(188.0, 50, 200, 100.375)修改为context.rect(188.0, 50, 200, 100)后，发现样式就完全一致了。

由此说明：画矩形的时候，如果里面的参数有不是整数的话，容易导致边框问题，所以建议大家取整后再用。

读到这里，这篇“canvas画矩形时出现边框样式不一致如何解决”文章已经介绍完毕，想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会，如果想了解更多相关内容的文章，欢迎关注亿速云行业资讯频道。