畫布在使用保證金時不起作用

-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

畫布在使用保證金時不起作用

回答

相關問題