Question

我正在尝试创建一个彩票游戏，我正在使用＆＃34;划痕背景图像＆＃34;和一个随机数字在其上面的表，然后我试图使用画布来覆盖这个背景图像＆amp;数字，所以我可以刮掉画布并看到数字，我的问题是数字也被划伤，所以只有背景图像留下我划伤我的画布（刷去除覆盖图像）。

有人知道我可以做些什么来让文字保持可见而不是在我擦除画布时被删除？

＆＃13;

bridgeCanvas = bridge.getContext('2d'),
  brushRadius = (bridge.width / 100) * 5,
  img = new Image();

if (brushRadius < 50) {
  brushRadius = 50
}

img.onload = function() {
  bridgeCanvas.drawImage(img, 0, 0, bridge.width, bridge.height);
}
img.loc = 'http://freeplay2.nyxinteractive.com/htmltest/img/';
img.filename = 'unscratched.jpg';
if (window.devicePixelRatio >= 2) {
  var nameParts = img.filename.split('.');
  img.src = img.loc + nameParts[0] + "-2x" + "." + nameParts[1];
} else {
  img.src = img.loc + img.filename;
}

function detectLeftButton(event) {
  if ('buttons' in event) {
    return event.buttons === 1;
  } else if ('which' in event) {
    return event.which === 1;
  } else {
    return event.button === 1;
  }
}

function getBrushPos(xRef, yRef) {
  var bridgeRect = bridge.getBoundingClientRect();
  return {
    x: Math.floor((xRef - bridgeRect.left) / (bridgeRect.right - bridgeRect.left) * bridge.width),
    y: Math.floor((yRef - bridgeRect.top) / (bridgeRect.bottom - bridgeRect.top) * bridge.height)
  };
}

function drawDot(mouseX, mouseY) {
  bridgeCanvas.beginPath();
  bridgeCanvas.arc(mouseX, mouseY, brushRadius, 0, 2 * Math.PI, true);
  bridgeCanvas.fillStyle = '#000';
  bridgeCanvas.globalCompositeOperation = "destination-out";
  bridgeCanvas.fill();
}

bridge.addEventListener("mousemove", function(e) {
  var brushPos = getBrushPos(e.clientX, e.clientY);
  var leftBut = detectLeftButton(e);
  if (leftBut == 1) {
    drawDot(brushPos.x, brushPos.y);
  }
}, false);

bridge.addEventListener("touchmove", function(e) {
  e.preventDefault();
  var touch = e.targetTouches[0];
  if (touch) {
    var brushPos = getBrushPos(touch.pageX, touch.pageY);
    drawDot(brushPos.x, brushPos.y);
  }
}, false);

＆＃13;

body {
  margin: 0;
}

#bridge {
  display: block;
  margin: 0 auto;
  background-image: url('http://freeplay2.nyxinteractive.com/htmltest/img/unscratched.jpg');
  background-image: -webkit-image-set(url('http://freeplay2.nyxinteractive.com/htmltest/img/unscratched.jpg') 1x, url('http://freeplay2.nyxinteractive.com/htmltest/img/unscratched.jpg') 2x);
  background-size: cover;
  width: 640px;
  max-width: 640px;
  height: 960px;
  cursor: crosshair;
  cursor: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/circular-cursor.png) 53 53, crosshair;
}

#bridgeContainer {
  text-align: center;
  font-family: Avenir, sans-serif;
}

#bridgeContainer figcaption {
  margin-top: 2rem;
}

＆＃13;

<div class="center" id="center" style="width:640px; height:960px; overflow:hidden;">
  <canvas id="bridge" width="640" height="960"></canvas>
  <table cellspacing="140" style="color:yellow; margin-top:35%; padding:1px; position:fixed;" align="center;">
    <tr>
      <td>Jill</td>
      <td>Smith</td>
      <td>50</td>
    </tr>
    <tr>
      <td>Eve</td>
      <td>Jackson</td>
      <td>94</td>
    </tr>
    <tr>
      <td>John</td>
      <td>Doe</td>
      <td>80</td>
    </tr>
  </table>
  <div id="footer">
    <input type="image" id="buyTicket" />
  </div>
</div>
<div id="title"></div>
<div id="header"></div>
<div id="wrapper">
</div>
<div id="winnings"></div>

＆＃13;

有没有人知道我能在这里做些什么来让Jill，smith，50等留下来，尽管我擦掉了它们上面的画布？

如何将文本附加到背景图像HTML

0 个答案: