HTML5 canvas画矩形框时出現边框款式不1致的处理方

日期:2021-01-20 类型:科技新闻 

关键词:如何创建网站,免费网站建站,网站建设文章,网站建设7个基本流程,自动建站

这两天必须用到朋友HTML5画图的东东,发现里边画矩形框的涵数画出来的边框出現了款式不1致的难题,最终我根据1些清除法寻找了难题的关键,现共享给大伙儿。

先附上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>

你会发现实行后面框款式不1样,显著底部很细。色调也略有不一样

把context.rect(188.0, 50, 200, 100.375)改动为context.rect(188.0, 50, 200, 100)后,发现款式就彻底1致了。
由此表明:画矩形框的情况下,假如里边的主要参数有并不是整数金额的话,非常容易致使边框难题,因此提议大伙儿取整后再用。