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

Question

在调整canvas的大小后，我无法在当前鼠标光标位置获得正确的颜色。 调整canvas的原因是将其调整为不同的屏幕尺寸。 不幸的是，颜色数据在调整大小后没有得到更新。 我该如何解决这个问题？

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

您可以看到问题演示in this video。

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() 
}