Canvas JS 鼠标悬停创建圆圈

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");
const img = new Image()
img.src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAOEAAACWAQAAAAAA79KuAAAACXBIWXMAAAsSAAALEgHS3X78AAAAOUlEQVRYhe3JMQ0AIAwAwSYIwSpSEUICC2VCQIf78S8i6/u24hOllFJKaUHNt2ee9taglFJKKa2sB2rwUcX1FaqwAAAAAElFTkSuQmCC"
img.onload = function () {
  ctx.drawImage(img, 0, 0)
}

// Load and convert IMG 2 data URI
function zobrazit(input) {
    if (input.files && input.files[0]) {
        var reader = new FileReader();
        reader.onload = function (e) {
            var obrazek = document.getElementById("obrazek");
            obrazek.src = e.target.result;
            document.forms[0].dataUri.value = obrazek.src;
        };
        reader.readAsDataURL(input.files[0]);
    }
}

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>

<form style="float:right">
    <input
        type='file'
        onchange="zobrazit(this)"
    size=60>
    <br>
    <textarea name=dataUri rows=10 cols=40></textarea>
</form>
<img id="obrazek">

Answer 2

如果画布是图像不工作返回总是 #00000 颜色

var canvas = document.getElementById('#canvas');
            var context = canvas.getContext('2d');
            var imageObj = new Image();
            imageObj.src = urlImg;
            imageObj.onload = function () {
                context.drawImage(imageObj, 0, 0);
            };