Canvas JS mouseover创建圈子

Question

大家好。我有一个带有图像的画布，我在鼠标上方捕获了颜色，如果颜色不同于白色，则更改了鼠标指针，现在我希望其他人更改指针，可以在鼠标之后创建一个大小为24x24px的圆圈。例如，我创建了这张照片

您能帮我吗？谢谢

$('#canvas').mousemove(function(event) {
    var pos = findPos(this);
    var dimensionMarker = 12;
    x_default = event.pageX - pos.x;
    y_default = event.pageY - pos.y;
    x = (event.pageX - pos.x) - dimensionMarker;
    y = (event.pageY - pos.y) - dimensionMarker;
    var coord = "x=" + x_default + ", y=" + y_default;
    var c = this.getContext('2d');
    var p = c.getImageData(x_default, y_default, 1, 1).data; 
    hex = "#" + ("000000" + rgbToHex(p[0], p[1], p[2])).slice(-6);
    if(hex != "#ffffff"){
        $(this).css({cursor: 'pointer'});
    }else{
        $(this).css({cursor: 'default'});
    }
});

Answer 1

使用我的notator test的一些肮脏技巧在SVG中做了一些事情。

 $('#paintArea').mousemove(function(event) {
    x_default = event.pageX;
    y_default = event.pageY;
    var c = $('#canvas')[0].getContext('2d');
    var p = c.getImageData(x_default, y_default, 1, 1).data;
    hex = "#" + ("000000" + rgbToHex(p[0], p[1], p[2])).slice(-6);
    if(hex != "#ffffff"){
        paintArea.firstElementChild.style.display = "none";
        $(this).css({cursor: 'pointer'});
    }else{
        showPos(event.originalEvent);
        paintArea.firstElementChild.style.display = "";
        $(this).css({cursor: 'default'});
    }
    window.status = hex;
});

var cursor;
var paintArea = document.getElementById("paintArea");
function showPos(e) {
	var info;
	paintArea.firstElementChild.setAttribute('transform', 'translate(' + e.x + ',' + e.y + ')');
}

// env preparation
function rgbToHex(r,g,b) {
    hex = (0x1000000 + (r << 16) + (g << 8) + b).toString(16).slice(1);
    return hex;
}

var c = document.getElementById("canvas");
var ctx = c.getContext("2d");

// Create gradient
var grd = ctx.createLinearGradient(0, 0, 150, 0);
grd.addColorStop(0, "black");
grd.addColorStop(1, "white");

// Fill with gradient
ctx.fillStyle = grd;
ctx.fillRect(10, 10, 250, 120);

canvas {
  border: 1px blue;
  background-color: gray;
}
svg {
  border: 1px green;
  position: absolute;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<svg id="paintArea">
  <circle cx="0" cy="0" r="24" stroke-width="3" fill="red" />
</svg>
<canvas id="canvas"></canvas>