Question

var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var rect = {};
var drag = false;
make_base();
init();


function make_base() {
  base_image = new Image();
  base_image.src = 'https://www.w3schools.com/css/img_fjords.jpg';
  base_image.onload = function() {
    context.drawImage(base_image, 0, 0, 800, 500);
  }
}

function writeMessage(canvas, message) {
  var context = canvas.getContext('2d');
  context.clearRect(0, 0, canvas.width, canvas.height);
  context.drawImage(base_image, 0, 0, 800, 500);
  context.font = '12pt Calibri';
  context.fillStyle = 'red';
  context.fillText(message, 25, 25);
}

function getMousePos(canvas, evt) {
  var rect = canvas.getBoundingClientRect();
  return {
    x: evt.clientX - rect.left,
    y: evt.clientY - rect.top
  };
}

function init() {

    canvas.addEventListener('mousedown', mouseDown, false);
    canvas.addEventListener('mouseup', mouseUp, false);
    canvas.addEventListener('mousemove', mouseMove, false);
}

function mouseDown(e) {
    rect.startX = e.pageX - this.offsetLeft;
    rect.startY = e.pageY - this.offsetTop;
    drag = true;
}

function mouseUp() {
    drag = false;
}

function mouseMove(e) {
    if(drag) {
        rect.w = (e.pageX - this.offsetLeft) - rect.startX;
        rect.h = (e.pageY - this.offsetTop) - rect.startY ;
        context.clearRect(rect.startX, rect.startY, rect.w, rect.h);
        draw();
    }
}

function draw() {
    context.lineWidth="1";
    context.strokeStyle = "blue";
    context.beginPath();
    context.rect(rect.startX, rect.startY, rect.w, rect.h);
    context.stroke();
    context.closePath();
}

<canvas id="myCanvas" width="800" height="500" style="border:1px solid #000000;">
    </canvas>

现在我可以使用鼠标在图像上绘制多个矩形。但是，它会是白色的吗？

如何绘制矩形更像选择区域？

Answer 1

最佳实践。

渲染

您不应该从鼠标或其他UI事件渲染，因为它们未同步到显示器。这可能导致令人不快的剪切和闪烁，并且还会导致不必要的渲染，这些渲染可能只是部分或根本没有看到，无缘无故地咀嚼电源和电池寿命。

如果您经常更新DOM中的元素（不仅仅是画布），请使用通过requestAnimationFrame调用的渲染循环。这可以确保您只呈现可以看到的DOM内容。

输入丢失

当获取要拖动的鼠标输入时，您应该听取文档的鼠标事件而不是元素。这允许您在移动元素和页面时跟随拖动的输入。如果不这样做，如果用户拖动元素/页面并释放鼠标按钮，则拖动可能会被锁定。

其他答案都无法正确处理。

常量和样式

尽可能使用常量（const）。它们是块范围的，有助于减少错误（尽管这是有争议的）。

习惯于在代码顶部添加"use strict";，它可以帮助您尽早减少和发现错误。完成代码后，请不要添加"use strict"，除非您执行完整的测试周期，因为它会/可能会破坏曾经工作过的代码。

虽然最佳实践不定义命名样式，但它确实意味着您始终使用命名样式。如果您选择蛇案例（snake_case），那么在整个代码中使用它，如果您选择驼峰案例（camelCase），那么只使用它。你记住变量作为单词，试图记住你用于变量的样式会减慢你的速度并导致错误。

＆＃13;

"use strict";
requestAnimationFrame(mainLoop);
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
const storedRects = [];
const baseImage = loadImage("https://www.w3schools.com/css/img_fjords.jpg");
var refresh = true;
const rect = (() => {
    var x1, y1, x2, y2;
    var show = false;
    function fix() {
        rect.x = Math.min(x1, x2);
        rect.y = Math.min(y1, y2);
        rect.w = Math.max(x1, x2) - Math.min(x1, x2);
        rect.h = Math.max(y1, y2) - Math.min(y1, y2);
    }
    function draw(ctx) { ctx.strokeRect(this.x, this.y, this.w, this.h) }
    const rect = {x : 0, y : 0, w : 0, h : 0,  draw};
    const API = {
        restart(point) {
            x2 = x1 = point.x;
            y2 = y1 = point.y;
            fix();
            show = true;
        },
        update(point) {
            x2 = point.x;
            y2 = point.y;
            fix();
            show = true;
        },
        toRect() {
            show = false;
            return Object.assign({}, rect);
        },
        draw(ctx) {
            if (show) { rect.draw(ctx) }
        },
        show : false,
    }
    return API;
})();

function loadImage(url) {
    const image = new Image();
    image.src = url;
    image.onload = () => refresh = true;
    return image;
}

const mouse = {
    button : false,
    x : 0,
    y : 0,
    down : false,
    up : false,
    element : null,
    event(e) {
        const m = mouse;
        m.bounds = m.element.getBoundingClientRect();
        m.x = e.pageX - m.bounds.left - scrollX;
        m.y = e.pageY - m.bounds.top - scrollY;
        const prevButton = m.button;
        m.button = e.type === "mousedown" ? true : e.type === "mouseup" ? false : mouse.button;
        if (!prevButton && m.button) { m.down = true }
        if (prevButton && !m.button) { m.up = true }
    },
    start(element) {
        mouse.element = element;
        "down,up,move".split(",").forEach(name => document.addEventListener("mouse" + name, mouse.event));
    }
}

mouse.start(canvas);
function draw() {
    ctx.drawImage(baseImage, 0, 0, ctx.canvas.width, ctx.canvas.width);
    ctx.lineWidth = 1;
    ctx.strokeStyle = "yellow";
    storedRects.forEach(rect => rect.draw(ctx));
    ctx.strokeStyle = "red";
    rect.draw(ctx);
}
function mainLoop() {
    if (refresh || mouse.down || mouse.up || mouse.button) {
        refresh = false;
        if (mouse.down) {
            mouse.down = false;
            rect.restart(mouse);
        } else if (mouse.button) {
            rect.update(mouse);
        } else if (mouse.up) {
            mouse.up = false;
            rect.update(mouse);
            storedRects.push(rect.toRect());
        }
        draw();
    }
    requestAnimationFrame(mainLoop)
}

＆＃13;

<canvas id="myCanvas" width="800" height="500" title = "click and drag to add rectangles" style="border:1px solid #000000;cursor:crosshair"></canvas>

＆＃13;

画布 - 如何在图像上选择多个矩形区域？

1 个答案:

最佳实践。

渲染

输入丢失

常量和样式