javascript - 在 Javascript 中调整 Canvas 背景

Question

我正在尝试在 Canvas 上绘制一个 rect，但我希望 Canvas 具有轻微透明的背景，但绘制的 rect 没有背景。

我要的是如下内容:

我有如下代码:

var canvas = document.getElementById('canvas');
var img = document.getElementById('photo');
var ctx = canvas.getContext('2d');
var rect = {};
var drag = false;
var update = true; // when true updates canvas
var original_source = img.src;
img.src = original_source;

function init() {
    img.addEventListener('load', function(){
        canvas.width = img.width;
        canvas.height = img.height;
        canvas.addEventListener('mousedown', mouseDown, false);
        canvas.addEventListener('mouseup', mouseUp, false);
        canvas.addEventListener('mousemove', mouseMove, false);
    });
    // start the rendering loop
    requestAnimationFrame(updateCanvas);
}

// main render loop only updates if update is true
function updateCanvas(){
  if(update){
      drawCanvas();
      update = false;
  }

  requestAnimationFrame(updateCanvas);
}

// draws a rectangle with rotation 
function drawRect(){
   ctx.setTransform(1,0,0,1,rect.startX + rect.w / 2, rect.startY + rect.h / 2);
   ctx.rotate(rect.rotate);
   ctx.beginPath();
   ctx.rect(-rect.w/2, -rect.h/2, rect.w, rect.h);
   /* ctx.fill(); */
   ctx.stroke();
}

// clears canvas sets filters and draws rectangles
function drawCanvas(){
    // restore the default transform as rectangle rendering does not restore the transform.
    ctx.setTransform(1,0,0,1,0,0);
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    drawRect()
}

// create new rect add to array 
function mouseDown(e) {
    rect = {
      startX : e.offsetX,
      startY : e.offsetY,
      w : 1,
      h : 1,
      rotate : 0,
    };
    drag = true;
}

function mouseUp() { drag = false; buttons_shown = true; update = true; }

function mouseMove(e) {
    if (drag) {
        rect.w = (e.pageX - this.offsetLeft) - rect.startX;
        rect.h = (e.pageY - this.offsetTop) - rect.startY;
        update = true;
    }
}

init();

.hide{
    display: none !important;
}

canvas{
  position: absolute;
  left: 0; 
  right: 0; 
  top: 0; 
  bottom: 0; 
  display:inline-block;
  background:rgba(0,0,0,0.3);
}

<div style="position: relative; overflow: hidden;display:inline-block;">
    <img id="photo" src="http://www.html5canvastutorials.com/demos/assets/darth-vader.jpg"/>
    <canvas id="canvas"></canvas>
</div>


<div id="buttons" class="hide"></div>

在我的示例中，我将 Canvas 的背景设置为我想要的，但我无法删除绘制的矩形的背景，它与 Canvas 的颜色相同。

Here is the fiddle.

知道怎么解决吗？

Answer 1

这可以通过多种方式实现(合成、剪辑路径...)，但最简单的路径可能是使用 fill() 方法的 "evenodd" 填充规则参数这将使我们能够绘制这个带孔的矩形。

这个过程很简单，首先绘制一个与 Canvas 大小相同的矩形，然后在相同的路径声明中绘制您自己的较小矩形。然后，填充规则会将这个较小的内部矩形从较大的矩形中排除。

function drawRect() {
  ctx.beginPath(); // a single path
  // the big rectangle, covering the whole canvas
  ctx.rect(0, 0, ctx.canvas.width, ctx.canvas.height);
  // your smaller, inner rectangle
  ctx.setTransform(1, 0, 0, 1, rect.startX + rect.w / 2, rect.startY + rect.h / 2);
  ctx.rotate(rect.rotate);
  ctx.rect(-rect.w / 2, -rect.h / 2, rect.w, rect.h);
  // set the fill-rule to evenodd
  ctx.fill('evenodd');
  // stroke
  // start a new Path declaration
  ctx.beginPath
  // redraw only the small rect
  ctx.rect(-rect.w / 2, -rect.h / 2, rect.w, rect.h);
  ctx.stroke();
}



var canvas = document.getElementById('canvas');
var img = document.getElementById('photo');
var ctx = canvas.getContext('2d');
var rect = {};
var drag = false;
var update = true; // when true updates canvas
var original_source = img.src;
img.src = original_source;

function init() {
  img.addEventListener('load', function() {
    canvas.width = img.width;
    canvas.height = img.height;
    canvas.addEventListener('mousedown', mouseDown, false);
    canvas.addEventListener('mouseup', mouseUp, false);
    canvas.addEventListener('mousemove', mouseMove, false);
  // set our context's styles here
  ctx.fillStyle = 'rgba(0,0,0,.5)';
  ctx.strokeStyle = 'white';
  ctx.lineWidth = 2;
  });

  // start the rendering loop
  requestAnimationFrame(updateCanvas);
}

// main render loop only updates if update is true
function updateCanvas() {
  if (update) {
    drawCanvas();
    update = false;
  }

  requestAnimationFrame(updateCanvas);
}

// draws a rectangle with rotation 

// clears canvas sets filters and draws rectangles
function drawCanvas() {
  // restore the default transform as rectangle rendering does not restore the transform.
  ctx.setTransform(1, 0, 0, 1, 0, 0);
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  drawRect()
}

// create new rect add to array 
function mouseDown(e) {
  rect = {
    startX: e.offsetX,
    startY: e.offsetY,
    w: 1,
    h: 1,
    rotate: 0,
  };
  drag = true;
}

function mouseUp() {
  drag = false;
  buttons_shown = true;
  update = true;
}

function mouseMove(e) {
  if (drag) {
    rect.w = (e.pageX - this.offsetLeft) - rect.startX;
    rect.h = (e.pageY - this.offsetTop) - rect.startY;
    update = true;
  }
}

init();

.hide {
  display: none !important;
}

canvas {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  display: inline-block;
  background: rgba(0, 0, 0, 0.3);
}

<div style="position: relative; overflow: hidden;display:inline-block;">
  <img id="photo" src="http://www.html5canvastutorials.com/demos/assets/darth-vader.jpg" />
  <canvas id="canvas"></canvas>
</div>


<div id="buttons" class="hide"></div>