调整画布大小后，在画布上的鼠标位置获取颜色

Question

调整canvas大小后，我无法在当前的鼠标光标位置获得正确的颜色。 调整canvas大小的原因是使其适应不同的屏幕尺寸。 不幸的是，颜色数据在调整大小后无法更新。 我怎样才能解决这个问题？

我的代码在JS Fiddle上 （JS部分也在下面）。

您可以在此视频中看到有关该问题的演示。

var actualColor = "ffffff";
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');

context.canvas.width = 150;
context.canvas.height = 200;
context.beginPath(); context.rect(0,0,150,100); context.fillStyle="red"; context.fill(); context.closePath();
context.beginPath(); context.rect(0,100,150,100); context.fillStyle="blue"; context.fill(); context.closePath();

window.addEventListener('load', function(){
    resize();
});

window.addEventListener('resize', function(){
    resize();
});


/**
 * Scale proportionally: If the width of the canvas > the height, the canvas height
 * equals the height of the browser window. Else, the canvas width equals the width of the browser window.
 * If the window is resized, the size of the canvas changes dynamically.
 */

function resize() {
    var ratio = canvas.width / canvas.height;
    var canvas_height = window.innerHeight;
    canvas_height -= 130; // remove later
    var canvas_width = canvas_height * ratio;
    if (canvas_width > window.innerWidth) {
        canvas_width = window.innerWidth;
        canvas_height = canvas_width / ratio;
    }
    canvas.style.width = canvas_width + 'px';
    canvas.style.height = canvas_height + 'px';
}


// get the color at the mouse position
$('#canvas').mousemove(function (e) {
    var pos = {
      x:canvas.offsetLeft,
      y:canvas.offsetTop
    }
    var x = e.pageX - pos.x;
    var y = e.pageY - pos.y;
    var c = canvas.getContext('2d');
    var p = c.getImageData(x, y, 1, 1).data;
    actualColor = ("000000" + rgbToHex(p[0], p[1], p[2])).slice(-6);
    $('#colorOutput').css("background-color", "#" + actualColor); 
    $('#status').html(actualColor);
});

function rgbToHex(r, g, b) {
    return componentToHex(r) + componentToHex(g) + componentToHex(b);
}

function componentToHex(c) {
    var hex = c.toString(16);
    return hex.length == 1 ? "0" + hex : hex;
}

Answer 1

问题是您正在缩放画布。 您将必须设置其实际宽度和高度，然后重新绘制它。

检查一下： http : //jsfiddle.net/vyjwLfuc/

function resize() {
    ...
    canvas.width = canvas_width
    canvas.height = canvas_height
    draw()
}