Question

我正在开发一个带画布的drwaing应用程序。我有一些基本的HTML：

<body>
  <div class="wrapper">
    <ul id="toolbar">
      some tools...
    </ul> 
    <canvas id="myCanvas" width="420" height="420"></canvas>
  </div>
</body>

.wrapper的CSS：

.wrapper { width: 490px }

JS：

canvas.addEventListener('mousemove', function (e) {
        drawPixel(e.pageX, e.pageY);
    });

    canvas.addEventListener('mouseup', function (e) {
        drawPixel(e.pageX, e.pageY);
        canvas.isDrawing = false;
    });

    canvas.addEventListener('mousedown', function (e) {
        canvas.isDrawing = true;
    });

    canvas.addEventListener('mouseleave', function (e) {
        canvas.isDrawing = false;
    });

var drawPixel = function (x, y) {
    if (! canvas.isDrawing) {
        return;
    }

    x = (Math.ceil(x / 15) * 15 ) - 15;
    y = (Math.ceil(y / 15) * 15 ) - 15;

    context.fillStyle = pixelColor;

    if (pixelColor === 'rgba(0, 0, 0, 0)') {
        context.clearRect(x, y, 15, 15);
    } else {
        context.fillRect(x, y, 15, 15);
    }

现在一切都像预期的那样，我可以在画布上绘制一些线条，但是当我将margin: 0 auto;添加到.wrapper时，我不能再画出来了，不知道为什么？

任何想法如何解决？

Answer 1

您只是将画面相对于页面/文档本身绘制到画布上，而不是画布元素。这就是当画布位于左上角但当画布位于页面上任何其他位置时不起作用的原因。

只需要一个小修复就可以使它工作。您将需要更新在画布上绘制的两个事件侦听器并减去画布的偏移位置，如下所示：

canvas.addEventListener('mousemove', function (e) {
    drawPixel(e.pageX - $(canvas).offset().left, e.pageY - $(canvas).offset().top);
});

canvas.addEventListener('mouseup', function (e) {
    drawPixel(e.pageX - $(canvas).offset().left, e.pageY - $(canvas).offset().top);
    canvas.isDrawing = false;
});

使用边距

1 个答案: