異なるアクションのためにキャンバスの領域を「マスクする」方法はありますか？

Question

私は現在、作成したカラーグラデーションイメージ（PNG）でロードする単純なカラーピッカーを持っています。ユーザーがカーソルを移動するかクリックすると、カーソルの下のカラー値が得られます。

画像には、透明度を表すグラデーションの左側に14x14ピクセルの領域が組み込まれています。この領域をユーザーが移動またはクリックすると、透明にするような色の選択をクリアしたい場合は、 。問題は私が誰かの助けを求めているので、私はこの部分を把握できません。

これはうまくいけばうまくいきます。

var img = new Image(); 
img.src = '/assets/images/results/colourpicker.png'; 

// Copy image (img) to canvas 
img.onload = function() { 
    var c = document.getElementById('colourPickerBar'); 
    var ctx = c.getContext('2d'); 
    c.width = img.width; 
    c.height = img.height; 
    ctx.drawImage(img,0,0); 
} 

var rgb; 

// get color on hover 
$('#colourPickerBar').bind('mousemove', function(e){ 
    var pos = findPos(this); 
    var x = e.pageX - pos.x; // get the x value of the cursor 
    var y = e.pageY - pos.y; // get the y value of the cursor 
    var ctx = document.getElementById('colourPickerBar').getContext('2d'); 
    var img_data = ctx.getImageData(x, y, 1, 1).data; 
    var hex = "#" + ("000000" + rgbToHex(img_data[0], img_data[1], img_data[2])).slice(-6); 

    $('#colourPickerSample').css('background', 'none').css('background-color', hex); //sets the color block value 
}); 

// get color on click 
$('#colourPickerBar').bind('click', function(e){ 
    var pos = findPos(this); 
    var x = e.pageX - pos.x; // get the x value of the cursor 
    var y = e.pageY - pos.y; // get the y value of the cursor 
    var ctx = document.getElementById('colourPickerBar').getContext('2d'); 
    var img_data = ctx.getImageData(x, y, 1, 1).data; 
    var hex = ("000000" + rgbToHex(img_data[0], img_data[1], img_data[2])).slice(-6); 

    $('#colourPickerSample').css('background-color', hex); //sets the color block value 
    $('#colourSelectorInput').val(hex); //sets the color value in the search input 
}); 

function findPos(obj) { 
    var curleft = 0, curtop = 0; 
    if (obj.offsetParent) { 
     do { 
      curleft += obj.offsetLeft; 
      curtop += obj.offsetTop; 
     } while (obj = obj.offsetParent); 
     return { x: curleft, y: curtop }; 
    } 
    return undefined; 
} 

function rgbToHex(r, g, b) { 
    if (r > 255 || g > 255 || b > 255) 
     throw "Invalid color component"; 
    return ((r << 16) | (g << 8) | b).toString(16); 
} 

EDIT：以下、いくつかの助けに解決おかげ

は、ここに私のコードです。今、地域のときにとるべきアクションを決定するためにIF ... ELSE文を使用して：14x14矩形がどこにある

// get color on hover 
$('#colourPickerBar').bind('mousemove', function(e){ 
    var pos = findPos(this); 
    var x = e.pageX - pos.x; // get the x value of the cursor 
    var y = e.pageY - pos.y; // get the y value of the cursor 
    var ctx = document.getElementById('colourPickerBar').getContext('2d'); 
    var img_data = ctx.getImageData(x, y, 1, 1).data; 
    var hex = "#" + ("000000" + rgbToHex(img_data[0], img_data[1], img_data[2])).slice(-6); 

    if ((0 <= x) && (14 >= x) && (0 <= y) && (14 >= y)) { 
     $('#colourPickerSample').css('background-color', 'none').addClass("defaultBg"); 
    } else { 
     $('#colourPickerSample').removeClass("defaultBg").css('background-color', hex); 
    } 
}); 

// get color on click 
$('#colourPickerBar').bind('click', function(e){ 
    var pos = findPos(this); 
    var x = e.pageX - pos.x; // get the x value of the cursor 
    var y = e.pageY - pos.y; // get the y value of the cursor 
    var ctx = document.getElementById('colourPickerBar').getContext('2d'); 
    var img_data = ctx.getImageData(x, y, 1, 1).data; 
    var hex = ("000000" + rgbToHex(img_data[0], img_data[1], img_data[2])).slice(-6); 

    if ((0 <= x) && (14 >= x) && (0 <= y) && (14 >= y)) { 
     $('#colourPickerSample').css('background-color', 'none').addClass("defaultBg"); 
     $('#colourSelectorInput').val('HEX'); 
    } else { 
     $('#colourPickerSample').removeClass("defaultBg").css('background-color', hex); 
     $('#colourSelectorInput').val(hex); 
    } 
}); 

Answer 1

あなたは単に見つける必要がありますし、テストあなたのクリックでイベントを移動し、マウスがあるかどうかを確認するためにそれの中に。真の場合は、必要なアクションを実行します。

私たちはあなたのイメージを見ることができないので、正確な場所を教えてくれません。マウスは14x14四角形の内側にある天気をか知る

は単純である：

return ((x <= mx) && ((x + width) >= mx) && (y <= my) && ((y + height) >= my)); X、Y、幅、高さは私の、RECT及びMXある

は、マウス