使用边距时画布不起作用答案

【问题标题】：canvas not working when using margin使用边距时画布不起作用
【发布时间】：2017-12-06 03:10:10
【问题描述】：

我正在用画布开发一个 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 时，我不能再画了，不知道为什么？

任何想法如何解决？

【问题讨论】：

请使用 Stack Snippets（[<>] 工具栏按钮）通过 runnable minimal reproducible example 更新您的问题，以证明问题。
当你发布与绘图有关的 JavaScript 时，我将删除我的 -1
添加了一个 liveemo
不，您的问题的全部内容必须在您的问题中，而不仅仅是链接。链接腐烂，使问题及其答案对未来的人们毫无用处，人们不应该离开现场来帮助你。再次：在问题中添加minimal reproducible example in，最好使用 Stack Snippets（[<>] 工具栏按钮）使其可运行。更多：How do I ask a good question?

标签： jquery html canvas

【解决方案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;
});

【讨论】：