Question

我在画布下有一个文本，我要在擦除画布的背景色时显示它。现在是红色，当我写透明时它不起作用。当我用鼠标绘制时，我需要显示该文本。我也尝试过rgba，但是没有用。

请帮助我

enter code here

var cont = document.getElementById("spots"),      // UI elements
    canvas = document.getElementById("canvas"),
    alpha = document.getElementById("alpha"),
    modes = document.getElementById("modes"),
    ctx = canvas.getContext("2d"),
    isDown = false,                               // defaults
    color = "red";

// set up color palette using a custom "Spot" object
// This will use a callback function when it is clicked, to
// change current color
function Spot(color, cont, callback) {
    var div = document.createElement("div");
    div.style.cssText = "width:50px;height:50px;border:1px solid #000;margin:0 1px 1px 0;background:" + color;
    div.onclick = function() {callback(color)};
    cont.appendChild(div);
}

// add some spot colors to our palette container
new Spot(color, cont, setColor);

// this will set current fill style based on spot clicked
function setColor(c) {ctx.fillStyle = c}

// setup defaults
ctx.fillStyle = color;
ctx.globalAlpha = 1;

// events
canvas.onmousedown = function() {isDown = true};
window.onmouseup = function() {isDown = false};
window.onmousemove = function(e) {
    if (!isDown) return;
    var r = canvas.getBoundingClientRect(),
        x = e.clientX - r.left,
        y = e.clientY - r.top;

    ctx.beginPath();
    ctx.arc(x, y, 25, 0, 2*Math.PI);
    ctx.fill();
};

.main-content{
  position: relative;
  width: 300px;
  height: 300px;
}
.main-text{
  position: absolute;
  right: 0;
  left: 0;
  text-align: center;
  z-index: 8;
  font-size: 35px;
}
#canvas{
  background-color: green;
  position: absolute;
  z-index: 9;
}

<div class="main-content">
    <p class="main-text">You Won!!!</p>
    <canvas id="canvas" width=300 height=300 style="border: 1px solid green;"></canvas>
    <div id="spots"></div>
</div>

Answer 1

我认为您希望在下面的代码段中获得类似的解决方案。

var cont = document.getElementById("spots"), // UI elements
  canvas = document.getElementById("canvas"),
  alpha = document.getElementById("alpha"),
  modes = document.getElementById("modes"),
  ctx = canvas.getContext("2d"),
  isDown = false, // defaults
  color = "green";

// set up color palette using a custom "Spot" object
// This will use a callback function when it is clicked, to
// change current color
function Spot(color, cont, callback) {
  var div = document.createElement("div");
  div.style.cssText = "width:50px;height:50px;border:1px solid #000;margin:0 1px 1px 0;background:" + color;
  div.onclick = function() {
    callback(color)
  };
  cont.appendChild(div);
}

// add some spot colors to our palette container
new Spot(color, cont, setColor);

// this will set current fill style based on spot clicked
function setColor(c) {
  ctx.fillStyle = c
}

// setup defaults
ctx.fillStyle = color;
ctx.globalAlpha = 1;

// create a rectangle using canvas functions, not CSS
// background color.
const createRect = (ctx, width, height) => {
  ctx.fillRect(0, 0, width, height)
}

createRect(ctx, 300, 300)

// events
canvas.onmousedown = function() {
  isDown = true
};
window.onmouseup = function() {
  isDown = false
};
window.onmousemove = function(e) {
  if (!isDown) return;
  var r = canvas.getBoundingClientRect(),
    x = e.clientX - r.left,
    y = e.clientY - r.top;

  // you needed a bit more code here:
  ctx.fillStyle = "rgba(255, 255, 255, 0.5)"

  ctx.save();
  ctx.globalCompositeOperation = 'destination-out';

  ctx.beginPath();
  ctx.arc(x, y, 25, 0, 2 * Math.PI, false);
  ctx.fill();

  ctx.restore();
};

.main-content {
  position: relative;
  width: 300px;
  height: 300px;
}

.main-text {
  position: absolute;
  right: 0;
  left: 0;
  text-align: center;
  z-index: 8;
  font-size: 35px;
}

#canvas {
  /*background-color: green;*/
  position: absolute;
  z-index: 9;
}

<div class="main-content">
  <p class="main-text">You Won!!!</p>
  <canvas id="canvas" width=300 height=300 style="border: 1px solid green;"></canvas>
  <div id="spots"></div>
</div>

关于画布的全局构图：https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/globalCompositeOperation

Answer 2

您已经到一半了，但是有几件事需要更改。您正在尝试做的是通过画布更改css属性的外观，但这样做并非如此。您也不能更改画布的透明度，但是有一些解决方案，非常简单。

您需要为画布应用背景色，然后使用完全相同的绘图功能删除像素，然后设置一个名为globalCompositeOperation的额外属性，该属性基本上是photoshop的“ BlendMode”

这是您的更新代码：

var cont = document.getElementById("spots"),      // UI elements
    canvas = document.getElementById("canvas"),
    alpha = document.getElementById("alpha"),
    modes = document.getElementById("modes"),
    ctx = canvas.getContext("2d"),
    isDown = false,                               // defaults
    color = "red";

// set up color palette using a custom "Spot" object
// This will use a callback function when it is clicked, to
// change current color
function Spot(color, cont, callback) {
    var div = document.createElement("div");
    div.style.cssText = "width:50px;height:50px;border:1px solid #000;margin:0 1px 1px 0;background:" + color;
    div.onclick = function() {callback(color)};
    cont.appendChild(div);
}

// add some spot colors to our palette container
//new Spot(color, cont, setColor);

// this will set current fill style based on spot clicked
function setColor(c) {ctx.fillStyle = c}

// setup defaults
ctx.fillStyle = color;
ctx.globalAlpha = 1;
// draw the background
ctx.fillRect(0, 0, 300, 300);
// add the 'blend mode effect'
ctx.globalCompositeOperation = 'destination-out';

// events
canvas.onmousedown = function() {isDown = true};
window.onmouseup = function() {isDown = false};
window.onmousemove = function(e) {
    if (!isDown) return;
    var r = canvas.getBoundingClientRect(),
        x = e.clientX - r.left,
        y = e.clientY - r.top;
    ctx.beginPath();
    ctx.arc(x, y, 25, 0, 2*Math.PI);
    ctx.fill();
};

.main-content{
  position: relative;
  width: 300px;
  height: 300px;
  background: blue;
}
.main-text{
  position: absolute;
  right: 0;
  left: 0;
  text-align: center;
  z-index: 8;
  font-size: 35px
}
#canvas{
  position: absolute;
  z-index: 9;
}

<div class="main-content">
    <p class="main-text">You Won!!!</p>
    <canvas id="canvas" width=300 height=300 style="border: 1px solid green;"></canvas>
    <div id="spots"></div>
</div>

除了JS上的微小更改外，我还更改了CSS上z-index的顺序。祝你好运

将画布背景颜色更改为透明

2 个答案: