Javascript 如何解决奇数作为HTML画布大小的问题？

我正在使用HTML画布元素

var canvas=document.getElementById（'c'）；
var ctx=canvas.getContext（'2d'）；
ctx.beginPath（）；
ctx.fillStyle=“#FF0000”；
ctx.rect（0,0，canvas.width/3，canvas.height/3）；
ctx.fill（）；
ctx.closePath（）；
ctx.beginPath（）；
ctx.fillStyle=“#FF0000”；
ctx.rect（canvas.width/3,0，canvas.width/3，canvas.height/3）；
ctx.fill（）；
ctx.closePath（）
如果使用样式标记或css文件，
可以正常工作


var canvas=document.getElementById（'c'）；
var ctx=canvas.getContext（'2d'）；
ctx.beginPath（）；
ctx.fillStyle=“#FF0000”；
ctx.rect（0,0，canvas.width/3，canvas.height/3）；
ctx.fill（）；
ctx.closePath（）；
ctx.beginPath（）；
ctx.fillStyle=“#FF0000”；
ctx.rect（canvas.width/3,0，canvas.width/3，canvas.height/3）；
ctx.fill（）；
ctx.closePath（）
.canvas{
宽度：541px；
身高：541px；
}
看起来您正在使用HiDPI（高DPI，视网膜）模式（操作系统级别的缩放超过100%），而您的画布方法与HiDPI不兼容

解决方案是使用
window.devicePixelRatio
按比例增加
CANVAS
元素的
width
和
height
HTML属性（或元素的DOM属性）的值，同时将其对应的CSS属性设置为当前大小。然后，您的画布将与HiDPI兼容且无模糊。这就是我在非模糊整数比例缩放中使用的方法：

var pixelRatio=window.devicePixelRatio；
canvas.width=541*像素比率；
canvas.height=541*像素比率；
canvas.style.width=''+541+'px'；
canvas.style.height=''+541+'px'；

另一种方法是使用上下文对象的方法，而不是设置CSS大小。这就是来自HTML5Rocks的Paul Lewis的观点：

var pixelRatio=window.devicePixelRatio；
canvas.width=541*像素比率；
canvas.height=541*像素比率；
canvas.getContext（'2d'）.scale（像素比率，像素比率）；
不确定您是否喜欢此解决方案，但您只能在
x2


var canvas=document.getElementById（'c'）；
var ctx=canvas.getContext（'2d'）；
ctx.beginPath（）；
ctx.fillStyle=“#FF0000”；
ctx.rect（0,0，canvas.width/3，canvas.height/3）；
ctx.fill（）；
ctx.closePath（）；
//使用此处可确保secound rect的开始位置正确
var x2=数学地板（画布宽度/3）；
ctx.beginPath（）；
ctx.fillStyle=“#FF0000”；
ctx.rect（x2，0，canvas.width/3，canvas.height/3）；
ctx.fill（）；
ctx.closePath（）
你的要求是不可能的。你想把一个不是3的倍数的数字（实际上，这里是素数）分成3个整数部分而不进行舍入。它必须是整数，因为计算机屏幕有离散的像素。这在数学上是不可能的。为什么不将精确值存储在变量中以供以后参考，而是在绘制时对其进行四舍五入，以便在整数坐标处绘制？（注意：您可能会发现对子像素的文字引用；但通常这只是对伪子像素的反走样，这会导致像您在这里看到的和您不想要的东西一样的伪影。）如果您总是使用
Math.floor
或
Math.ceil
或
Math.round
，将值舍入即可。宽度之和等于画布的宽度。这很奇怪也很有趣。为什么这可以工作，但硬编码的宽度/高度不能工作？特别是从数学上来说，这根本不可能？