Question

我正在尝试为canvas元素设置背景图像。

首先，我尝试使用样式属性设置背景。但这对我没有用，向我显示了黑屏。然后我尝试了其他方法。

我可以使用canvas方法设置背景，但是我不想这样做，因为在每一个动作中我都必须清除背景并重新设置。这会使应用程序变慢，尤其是在手机上。

ctx.drawImage（img，0,0，canvas.width，canvas.height）

我还尝试清除并设置发生移动的特定区域，但这也会导致某些旧手机的性能出现问题。

所以..我从头开始...我必须使用样式属性设置背景。

background-image: url("images/backgrounds/1.jpg");

我正在使用上述属性来设置背景，但是它没有起作用。如何解决此问题，如何使其起作用？

Answer 1

我已经尝试过了，并且成功了。可能是您没有设置画布的Webkit样式。

var canvas = document.getElementById("can");
var ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.arc(50, 50, 50, 0, 2 * Math.PI, false);
ctx.fill();

.canvas{
width:500px;
height:500px;
background-image: url("https://bigcitiloops.com/files/brands/samplekingloops/artwork/Just%20samples%20500x500.jpg");
-webkit-background-image: url("https://bigcitiloops.com/files/brands/samplekingloops/artwork/Just%20samples%20500x500.jpgq");
}

<canvas class="canvas" id="can"></canvas>

我什至已经测试了它上的图形，如黑色圆圈所示。

无法为画布设置背景图片

1 个答案: