javascript - d3 putimagedata cannot turn off smoothing -
somehow cannot turn off smoothing on image drawn on canvas using d3.js. tried disable imagesmoothingenabled in context. mistake? thank solving issue. thomas
<!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 not fire context.mozimagesmoothingenabled = false; context.webkitimagesmoothingenabled = false; context.msimagesmoothingenabled = false; var image = context.createimagedata(dx, dy); (var y = 0, p = -1; y < dy; ++y) { (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>
Comments
Post a Comment