在HTML5畫布上渲染網格

Question

我正在嘗試在HTML5畫布上呈現網格，但是我希望用戶在畫布上繪制的任何內容都可以放置在網格后面。 我試圖通過創建2個畫布來重新創建此畫布：一個帶有網格，另一個帶有用戶繪制的畫布。 帶有網格的那個放置在用戶繪制的畫布上方，並且該畫布應該是透明的，但不顯示用戶繪制的任何內容。 如果我將用戶繪制的畫布放在頂部，則可以看到用戶繪制的內容，但是該圖形位於網格的前面，並且我希望該圖形位於網格的后面。

您可以在這里查看我嘗試過的內容： http : //codepen.io/vishiswoz/pen/grqMyG

 function buildGrids(gridPixelSize, color, gap, div) { var canvas = $('#' + div + '').get(0); var ctx = canvas.getContext("2d"); //ctx.fillStyle="rgba(255, 255, 255, 0)"; //ctx.fillRect(0, 0, 500, 300); ctx.lineWidth = 0.5; ctx.strokeStyle = color; // horizontal grid lines for (var i = 0; i <= canvas.height; i = i + gridPixelSize) { ctx.beginPath(); ctx.moveTo(0, i); ctx.lineTo(canvas.width, i); if (i % parseInt(gap) == 0) { ctx.lineWidth = 0.5; } else { ctx.lineWidth = 0.5; } ctx.closePath(); ctx.stroke(); } // vertical grid lines for (var j = 0; j <= canvas.width; j = j + gridPixelSize) { ctx.beginPath(); ctx.moveTo(j, 0); ctx.lineTo(j, canvas.height); if (j % parseInt(gap) == 0) { ctx.lineWidth = 0.5; } else { ctx.lineWidth = 0.5; } ctx.closePath(); ctx.stroke(); } for(var ii = 0; ii <=canvas.width; ii+=2) { for(var jj=0; jj <=canvas.height; jj+=2) { ctx.clearRect(ii,jj,1,1); } } } buildGrids(5, "grey", 2, "test"); var el = document.getElementById('c'); var ctx = el.getContext('2d'); ctx.strokeStyle = "black"; var isDrawing; el.onmousedown = function(e) { isDrawing = true; ctx.lineWidth = 10; ctx.lineJoin = ctx.lineCap = 'round'; ctx.moveTo(e.clientX, e.clientY); }; el.onmousemove = function(e) { if (isDrawing) { ctx.lineTo(e.clientX, e.clientY); ctx.stroke(); } }; el.onmouseup = function() { isDrawing = false; }; 

 canvas { position: absolute; top: 0; left: 0; } #c { } 

 <canvas id="c" width="500" height="300"></canvas> <canvas id="test" width="500" height="300"></canvas> 

提前致謝。

Answer 1

在由頂部網格畫布覆蓋的底部畫布上繪圖

只需在頂部的網格畫布上偵聽鼠標事件，然后在繪圖畫布上繪制即可。

var gridCanvas=document.getElementById('test');

gridCanvas.onmousedown = function(e) {
  isDrawing = true;
  ctx.lineWidth = 10;
  ctx.lineJoin = ctx.lineCap = 'round';
  ctx.moveTo(e.clientX, e.clientY);
};

其他幾個問題

• 樣式問題：在mousemove上，繪制完整的線段，而不僅僅是繼續“打開”路徑。 您可以通過記住lastX，lastY並在該最后一點與當前鼠標位置之間繪制一段來實現此目的。
• 如果鼠標移出畫布，則應結束繪圖操作。 否則，您將得到一個“粘性”圖形，使用戶無法輕易停止該圖形。

這是您的代碼經過稍微重構以包含上述想法：

 var gridCanvas = document.getElementById('grid'); var el = document.getElementById('drawing'); function reOffset(){ var BB=el.getBoundingClientRect(); offsetX=BB.left; offsetY=BB.top; } var offsetX,offsetY; reOffset(); window.onscroll=function(e){ reOffset(); } window.onresize=function(e){ reOffset(); } buildGrids(5, "grey", 2, "test"); var ctx = el.getContext('2d'); ctx.strokeStyle = "orange"; var isDrawing,lastX,lastY; gridCanvas.onmousedown = function(e) { lastX=e.clientX; lastY=e.clientY; ctx.lineWidth = 10; ctx.lineJoin = ctx.lineCap = 'round'; isDrawing = true; }; gridCanvas.onmousemove = function(e) { if (isDrawing) { ctx.beginPath(); ctx.moveTo(lastX,lastY); ctx.lineTo(e.clientX, e.clientY); ctx.stroke(); lastX=e.clientX; lastY=e.clientY; } }; gridCanvas.onmouseup = function() { isDrawing = false; };gridCanvas.onmouseout = function() { isDrawing = false; }; function buildGrids(gridPixelSize, color, gap, div) { var ctx = gridCanvas.getContext("2d"); //ctx.fillStyle="rgba(255, 255, 255, 0)"; //ctx.fillRect(0, 0, 500, 300); ctx.lineWidth = 0.5; ctx.strokeStyle = color; // horizontal grid lines for (var i = 0; i <= gridCanvas.height; i = i + gridPixelSize) { ctx.beginPath(); ctx.moveTo(0, i); ctx.lineTo(gridCanvas.width, i); if (i % parseInt(gap) == 0) { ctx.lineWidth = 0.5; } else { ctx.lineWidth = 0.5; } ctx.closePath(); ctx.stroke(); } // vertical grid lines for (var j = 0; j <= gridCanvas.width; j = j + gridPixelSize) { ctx.beginPath(); ctx.moveTo(j, 0); ctx.lineTo(j, gridCanvas.height); if (j % parseInt(gap) == 0) { ctx.lineWidth = 0.5; } else { ctx.lineWidth = 0.5; } ctx.closePath(); ctx.stroke(); } for(var ii = 0; ii <=gridCanvas.width; ii+=2) { for(var jj=0; jj <=gridCanvas.height; jj+=2) { ctx.clearRect(ii,jj,1,1); } } } 

 body{ background-color: ivory; } canvas{border:1px solid red;} canvas{ position: absolute; top: 0; left: 0;} 

 <canvas id="drawing" width="500" height="300"></canvas> <canvas id="grid" width="500" height="300"></canvas>