javascript - Opera 浏览器中 Chart.js 的输出(柱形图)模糊吗？

Question

Opera 版本:32.0.1948.69(输出在其他主要浏览器上工作正常)。

有谁知道我怎样才能解决 Chart.js 的模糊问题？

图表的宽度在这里无关紧要，无论我采用哪个维度，它总是有一定程度的模糊(尤其是当鼠标悬停在列上时)，我想消除这种模糊。

图片:

fiddle 示例: https://jsfiddle.net/eugensunic/1sg79n7x/1/

fiddle 代码:

var array= [100, 59, 80, 333, 56, 55, 40]
var data = {
    labels: ["January", "February", "March", "April", "May", "June", "July"],
    datasets: [
        {
            label: "My First dataset",
            fillColor: "rgba(220,220,220,0.5)",
            strokeColor: "rgba(220,220,220,0.8)",
            highlightFill: "rgba(220,220,220,0.75)",
            highlightStroke: "rgba(220,220,220,1)",
            data: array
        }
     ]
};
 var options = {
        animation: true
    };
    var ctx = document.getElementById("myChart").getContext("2d");
    myNewChart = new Chart(ctx).Bar(data, options);

编辑: Chrome 和 Opera 的图片对比。

Answer 1

您需要添加几行 CSS 属性来优化 Opera 的图像渲染，如下所述:https://developer.mozilla.org/en-US/docs/Web/CSS/image-rendering见下文。

canvas#myChart {
    image-rendering: optimizeSpeed;             /* Older versions of FF */
    image-rendering: -moz-crisp-edges;          /* FF 6.0+ */
    image-rendering: -webkit-optimize-contrast; /* Webkit (non standard naming) */
    image-rendering: -o-crisp-edges;            /* OS X & Windows Opera (12.02+) */
    image-rendering: crisp-edges;               /* Possible future browsers. */
    -ms-interpolation-mode: nearest-neighbor;   /* IE (non standard naming) */
}