Javascript chrome windows 10上的画布模糊和扭曲 问题

因此，我一直在为我的网站开发一个条形图，使用一组介于

0

和

140

之间的样本。图形本身在我的MacBook上用Chrome（MacOS High Sierra10.13.3和Chrome67.0.3396.87）运行时看起来很好-但是，在我的Windows10设备上，Chrome中的图形看起来非常模糊（奇怪的是，它在IE、Edge和Firefox中仍然像在我的MacBook上一样工作）

这是它在我的MacBook上的外观：

这就是它在我的电脑（Chrome）上的外观：

---

我的代码

var波={
样本：空，
绘制：函数（画布、颜色）{
/* 
*@param{node}canvas-一个canvas元素
*@param{string}color-十六进制、rgb或rgba值
*/
var x=0，
ctx=canvas.getContext（“2d”），
samples=this.samples；
//遍历所有样本
对于（var i=0；i

如何实施（示例）：

var canvas=document.getElementById（“cvs”），
样本=[21,46,83,72,127]；//等
wave.init（画布、样本）；

---

到目前为止，我还没有在互联网上遇到过这样的问题，它已经困扰了我一段时间了。因此，任何能为我找到解决方案的人都将不胜感激

---

编辑：我注意到，如果我将画布上的

transform

属性设置为

scale（0.91）

它看起来非常好（…除了大小错误之外哈哈）

看起来像是chrome上的别名错误，有时我只是放大页面，然后一切又恢复正常…你检查过你的浏览器是否放大了吗？i、 不是在100%缩放。这是一个很长的镜头，但如果你使用CSS来设计画布的样式，可能会导致模糊（）

var wave = {
    samples: null,
    draw: function(canvas, color){
        /* 
        *   @param {node} canvas - a canvas element
        *   @param {string} color - a hexadecimal, rgb or rgba value
        */
        var x = 0,
            ctx = canvas.getContext("2d"),
            samples = this.samples;

        // iterate through all the samples
        for(var i = 0; i < samples.length; i++){
            ctx.fillStyle = color;

            // draw a 'bar' that is 2 pixels wide, 
            // and make each bar height relative to 
            // the canvas (60px) and sample heights
            // ie: 140 would become 60px in height
            ctx.fillRect(
                x + (x * 2), // left
                60 - (samples[i] * (60 / 140)), // top
                2, // width
                samples[i] * (60 / 40) // height
            );
            ctx.fill();

            x++;
        }
    },
    init: function(layer, samples){
        /* 
        *   @param {node} layer - a dom node (the bar chart canvas)
        *   @param {array} samples - an array of samples ranging from 0 to 140, eg: [0, 40, 45, 50, 140]
        */
        this.samples = samples;
        this.draw(layer, "#919191");
    }
}

<canvas id="cvs" width="600" height="60"></canvas>
<script type="text/javascript">
    var canvas = document.getElementById("cvs"),
        samples = [21, 46, 83, 72, 127]; // etc..
    wave.init(canvas, samples);
</script>