Question

不知怎的，我无法使用d3.js关闭在画布上绘制的图像上的平滑效果。我试图在我的上下文中禁用imageSmoothingEnabled。我的错是什么？非常感谢您解决我的问题。托马斯

<!DOCTYPE html>
<meta charset="utf-8">
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<script>
    var width = 500,
        height = 200;
    heatmap=
    [
        [200,104,104,105, 80,106,106,106,107,170],
        [104,104,105,105,106,106,107,107,107,107],
        [104,105,105,106,106,107,107,128,138,148]
    ];

    var dx = heatmap[0].length,
        dy = heatmap.length;

        var x = d3.scale.linear()
                .domain([0, dx])
                .range([0, width]);

        var y = d3.scale.linear()
                .domain([0, dy])
                .range([height, 0]);

        var color = d3.scale.linear()
                .domain([5, 115, 135, 155, 175, 295])
                .range(["#0a0", "#6c0", "#ee0", "#eb4", "#eb9", "#fff"]);


        d3.select("body").append("canvas")
                .attr("width", dx)
                .attr("height", dy)
                .style("width", width + "px")
                .style("height", height + "px")
                .call(drawImage);

        var svg = d3.select("body").append("svg")
                .attr("width", width)
                .attr("height", height);

        svg.append("g")
                .attr("class", "x axis")
                .attr("transform", "translate(0," + height + ")")
                .call(xAxis)
                .call(removeZero);

        svg.append("g")
                .attr("class", "y axis")
                .call(yAxis)
                .call(removeZero);

        function drawImage(canvas) {
            var context = canvas.node().getContext("2d");
            context.imageSmoothingEnabled = false; //seems to not fire
            context.mozImageSmoothingEnabled = false;
            context.webkitImageSmoothingEnabled = false;
            context.msImageSmoothingEnabled = false;
            var image = context.createImageData(dx, dy);

            for (var y = 0, p = -1; y < dy; ++y) {
                for (var x = 0; x < dx; ++x) {
                    var c = d3.rgb(color(heatmap[y][x]));
                    image.data[++p] = c.r;
                    image.data[++p] = c.g;
                    image.data[++p] = c.b;
                    image.data[++p] = 255;
                }
            }
            context.putImageData(image, 0, 0);
        }
</script>

d3 putimagedata无法关闭平滑

0 个答案: