合并画布和背景答案

【问题标题】：merging canvas and background合并画布和背景
【发布时间】：2015-07-31 14:09:54
【问题描述】：

我有一个带有 GIF 背景的画布。我需要用户上传绘图和 BG，以便其他用户可以看到绘图相对于 BG 的位置。 canvas.toDataURL();代码仅显示带有用户绘图的画布区域，而不显示 BG。如何展平或“合并图层”，以便我可以上传到数据库。

var mousePressed = false;
var lastX, lastY;
var ctx;

function InitThis() {
  ctx = document.getElementById('myCanvas').getContext("2d");

  $('#myCanvas').mousedown(function(e) {
    mousePressed = true;
    Draw(e.pageX - $(this).offset().left, e.pageY - $(this).offset().top, false);
  });

  $('#myCanvas').mousemove(function(e) {
    if (mousePressed) {
      Draw(e.pageX - $(this).offset().left, e.pageY - $(this).offset().top, true);
    }
  });

  $('#myCanvas').mouseup(function(e) {
    mousePressed = false;
  });
  $('#myCanvas').mouseleave(function(e) {
    mousePressed = false;
  });
}

function Draw(x, y, isDown) {
  if (isDown) {
    ctx.beginPath();
    ctx.strokeStyle = $('#selColor').val();
    ctx.lineWidth = $('#selWidth').val();
    ctx.lineJoin = "round";
    ctx.moveTo(lastX, lastY);
    ctx.lineTo(x, y);
    ctx.closePath();
    ctx.stroke();
  }
  lastX = x;
  lastY = y;
}

function clearArea() {
  // Use the identity matrix while clearing the canvas
  ctx.setTransform(1, 0, 0, 1, 0, 0);
  ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
}

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="jscripts/JsCode.js">
  var dataURL = canvas.toDataURL();
</script>

<!--canvas drawing and upload mySQL-->
<div align="center">
  <img src="graphics/teethDrawing.gif" width="705" style="position: absolute; z-index: -1" />
  <canvas id="myCanvas" width="700" height="965" style="border:2px solid black"></canvas>

  <br />
  <br />
  <button onclick="javascript:clearArea();return false;">Clear Area</button>
  Line width :
  <select id="selWidth">
    <option value="1">1</option>
    <option value="3" selected="selected">3</option>
    <option value="5">5</option>

  </select>
  Color :
  <select id="selColor">
    <option value="black" selected="selected">black</option>
    <option value="blue">blue</option>
    <option value="red">red</option>


  </select>
</div>
</div>

图片未显示，但显示在页面上。

帮助

【问题讨论】：

标签： javascript html canvas merge

【解决方案1】：

您希望绘图具有高度/宽度和位置：绝对样式标签吗？然后，您可以将这些样式标签发送到您的数据库，以便其他访问者可以看到绘图在 z-index:-1 图像顶部的位置。

<img src="drawing.jpg" style="position:absolute;left:50px;top:120px;" />

【讨论】：

【解决方案2】：

您可以使用合成将背景图像添加到现有画布图纸的“后面”。

// give the image an id so it's more easily fetched
<img id='bk' src="graphics/teethDrawing.gif" 
     width="705" style="position: absolute; z-index: -1" />

// fetch a reference to the bk image
var bk=document.getElementById('bk');

// causes new drawings to be drawn behind existing drawings
ctx.globalCompositeOperation='destination-over';

// draw the img to the canvas (behind existing lines)
ctx.drawImage(bk,0,0);

// always clean up! Reset to default.
ctx.globalCompositeOperation='source-over';

此过程会将 bk 图像永久添加到画布中。如果您需要将 bk 和 canvas-drawings 分开，那么您可以通过将 bk-image 和 canvas-drawings 都绘制到内存中的画布上来创建第二个内存画布来展平您的内容。

// create a temporary canvas 
var mem=document.createElement('canvas');
var mctx=mem.getContext('2d');
mem.width=canvas.width;
mem.height=canvas.height;

// draw the bk to the mem canvas
mctx.drawImage(bk,0,0);

// draw the main canvas to the mem canvas
mctx.drawImage(canvas,0,0);

【讨论】：