在Javascript中调整画布背景 [英] Adjust canvas background in Javascript

问题描述

我正在尝试在画布上绘制 rect ，但是我希望该画布具有浅透明的背景，但是要绘制 rect 没有背景。

I'm trying to drawn a rect on canvas, but I want that canvas has lightly transparent background, but that drawn rect has no background.

我将要做的事情如下：

我有如下代码：

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>

在我的示例中，我将画布的背景设置为我想要的背景，但是我无法删除绘制的背景rect，它具有与画布相同的颜色。

In my example I set the background of the canvas to what I will but I cannot remove that background for the drawn rect, it has the same color as the canvas.

这是小提琴。

有什么办法解决吗？

推荐答案

这可以通过多种方式来实现（合成，剪切路径...），但是最简单的路径可能是使用 evenodd 填充规则参数 fill（） 方法，该方法将允许我们绘制带有孔的矩形。

This could be achieved in several ways (compositing, clip-path...) but the easiest for such a simple path is probably to use the "evenodd" fill-rule parameter of fill() method which will allow us to draw this rectangle with a hole.

该过程仅是绘制第一个调整画布的大小，然后在同一路径声明中，绘制自己的较小矩形。然后，填充规则会将这个较小的内部矩形排除在较大的内部矩形之外。

The process is simply to draw a first rect the size of the canvas, then, in the same path declaration, draw your own smaller rectangle. The fill-rule will then exclude this smaller inner rectangle from the bigger one.

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>

这篇关于在Javascript中调整画布背景的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！