Raster auf HTML5-Canvas rendern

Question

Ich versuche, ein Raster auf einem HTML5-Zeichenbereich zu rendern, aber ich möchte, dass alles, was der Benutzer auf der Zeichenfläche zeichnet, hinter dem Raster platziert wird. Ich habe versucht, dies neu zu erstellen, indem ich 2 Canvas habe: eins mit dem Raster und das andere das, auf dem der Benutzer zeichnet. Der Bereich mit dem Raster befindet sich oben auf dem Zeichenbereich, auf dem der Benutzer zeichnet, und der Zeichenbereich sollte transparent sein, aber es zeigt nichts, was der Benutzer zeichnet. Wenn ich die Leinwand, die der Benutzer oben anzieht, platziere, kann ich sehen, was der Benutzer zeichnet, aber die Zeichnung befindet sich vor dem Raster, und ich möchte die Zeichnung hinter dem Raster sehen.

können Sie sehen, was ich hier versucht: 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>

Vielen Dank im Voraus.

Answer 1

Zeichnung auf einer unteren Leinwand von einem Top-Gitter Leinwand bedeckt

Gerade für Mausereignisse auf der Top-grid-Leinwand hören, sondern auf der Zeichenfläche ziehen.

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

Ein paar andere Fragen

• Eine Frage des Stils: Auf mousemove-, eine komplette Strecke zeichnen, anstatt nur einen „offenen“ Weg fort. Sie können dies tun, indem Sie sich an lastX und lastY erinnern und ein Segment zwischen diesem letzten Punkt und der aktuellen Mausposition zeichnen.
• Wenn die Maus die Zeichenfläche verlässt, sollten Sie die Zeichenoperation beenden. Andernfalls werden Sie mit einer "klebrigen" Zeichnung enden, bei der der Benutzer die Zeichnung nicht einfach anhalten kann.

Hier ist Ihr Code leicht die oben genannten Ideen sind Refactoring:

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>