在HTML5 Canvas上渲染网格

Question

我正在尝试在HTML5画布上渲染网格，但我希望用户在画布上绘制的任何内容都放在网格后面。我尝试通过2个画布重新创建它：一个带有网格，另一个带有用户绘制的画布。带有网格的那个放置在用户绘制的画布顶部，画布应该是透明的，但它不显示用户绘制的任何内容。如果我放置用户在顶部绘制的画布，那么您可以看到用户绘制的内容，但是绘图位于网格前面，我希望绘图位于网格后面。

您可以在此处查看我尝试过的内容：http://codepen.io/vishiswoz/pen/grqMyG

＆＃13;

＆＃13;

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

＆＃13;

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

#c {
  
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

提前致谢。

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

其他几个问题

• 风格问题：在鼠标移动时，绘制一个完整的线段而不是仅仅继续＆＃34;打开＆＃34;路径。您可以通过记住lastX，lastY并在最后一个点和当前鼠标位置之间绘制一个段来完成此操作。
• 如果鼠标离开画布，您应该结束绘图操作。否则你最终会得到一个＆＃34;粘性＆＃34;绘制用户无法轻易停止绘图的地方。

您的代码稍作重构，以包含上述提示：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;