Chart.js的输出(列栏)在Opera浏览器中模糊了吗？

Question

Opera版本:32.0.1948.69(输出在其他主流浏览器上运行正常).

有谁知道我怎么可能修复Chart.js的模糊性？

图表的宽度在这里不相关,无论我采取哪种尺寸,它总是具有一定程度的模糊性(特别是当悬停在柱子上时),我想消除它.

图片:

小提琴示例:https://jsfiddle.net/eugensunic/1sg79n7x/1/

小提琴代码:

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) */
}