画布在使用保证金时不起作用

-3

正在开发一个带画布的应用程序。我有一些基本的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我不能再画了不知道为什么？

任何想法如何解决？

来源

2017-07-02 Tafelglotzer

请与**运行的更新您的问题** [MCVE]使用堆栈片段（该'[<>]'工具栏按钮）来演示问题。 –

当您发布涉及绘图的JavaScript – Isaac

添加了一个livedemo – Tafelglotzer

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

只需稍作修改即可使其正常工作。您将需要更新的事件侦听器，其在画布上绘制和的。减去画布的偏移位置，就像这样：

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; 
});

来源

2017-07-02 22:19:45 wigi

画布在使用保证金时不起作用

回答

相关问题