Question

我是新来的，所以请考虑。

我已经创建了一个新的画布并在画布中创建了一个矩形，当我为画布设置背景时，我遇到了一个可怕的问题，即背景位于形状上

代码如下：

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var BB = canvas.getBoundingClientRect();
var offsetX = BB.left;
var offsetY = BB.top;
var WIDTH = canvas.width;
var HEIGHT = canvas.height;

var background = new Image();
background.src = "url_to_image";

// Make sure the image is loaded first otherwise nothing will draw.
background.onload = function(){
    ctx.drawImage(background,0,0);   
}

<canvas id="canvas" width=450 height=700></canvas>

谢谢

编辑： 我在代码中发现fillStyle函数可以更改背景，所以我删除了它，取而代之的是：

var w = canvas.width;
	var h = canvas.height
	var img = new Image();
	img.src = "http://www.girija.info/wp-content/uploads/2015/08/Paznja-Sabranost-450x700.png";
	img.onload = function () {
		var pattern = ctx.createPattern(img, "repeat");
		ctx.fillStyle = pattern;
		ctx.fillRect(0, 0, w, h);
	};
    //ctx.fillStyle = "#FAF7F8";

    rect(0, 0, WIDTH, HEIGHT);
    // redraw each rect in the rects[] array
    for (var i = 0; i < rects.length; i++) {
        var r = rects[i];
        ctx.fillStyle = 'red';
        rect(r.x, r.y, r.width, r.height);
    }

但是矩形的每次拖动（矩形从堆栈加载并且可以拖动）矩形的背景颜色都会改变

Answer 1

您可以使用css属性设置背景

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var BB = canvas.getBoundingClientRect();
var offsetX = BB.left;
var offsetY = BB.top;
var WIDTH = canvas.width;
var HEIGHT = canvas.height;

ctx.rect(10, 10, 100, 100);
ctx.fill();
canvas.style.backgroundImage = 'url(https://picsum.photos/450/700)';

<canvas id="canvas" width=450 height=700></canvas>

Answer 2

var canvas = document.getElementById('canvas'),
context = canvas.getContext('2d');

background_image();
function background_image()
{
  background_image = new Image();
  background_image.src = 'https://image.ibb.co/kmV8kz/photodune_2359510_smiles_l_22.png';
  background_image.onload = function(){
    context.drawImage(background_image, 0, 0);
  }
}

<canvas id="canvas" width=450 height=700></canvas>

画布背景隐藏了我添加的矩形

2 个答案: