画像の上にマウスを動かす動作

Question

私はこのウェブページdvsantos.comを「企業価値」セクションに掲載しています。 「人」「顧客」などがある円の種類があります...

私が必要とするのは、円のこのセクションの1つにマウスを合わせると、その隣にあるテキストが変わりますキャンバスを使って色を認識しようとしていますが、一部のコンピュータや一部の解像度では動作しません。

私はここで何を使用するかについてのアイデアがありません。

私は基本的に、これを使用しています：

$(function() { 

var canvas = document.getElementById('canvas1'); 

var img = new Image(); 
img.src = '../wp-content/uploads/2016/07/dvs_img5-1.png'; 



var ctx = canvas.getContext('2d'); 
img.onload = function() { 
ctx.canvas.width = img.width ; 
ctx.canvas.height = img.height; 
ctx.drawImage(img, 0, 0 ,img.width,img.height); 
img.style.display = 'none'; 

}; 




var color = document.getElementById('color'); 
function pick(event) { 


var pos = findPos(canvas); 
var x = event.pageX - pos.x; 
var y = event.pageY - pos.y; 




    var pixel = ctx.getImageData(x, y, 1,1); 
    var pixelData = pixel.data; 

    var rgba = 'rgba(' + pixelData[0] + ',' + pixelData[1] + 
       ',' + pixelData[2] + ',' + pixelData[3] + ')'; 

Answer 1

私は知らないあなたはthisそれは別のquestion