調整畫布大小後，在畫布上獲取鼠標位置的顏色

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