我正在尝试为画布元素设置背景图像。
一开始，我尝试使用样式属性设置背景。但它对我不起作用，显示黑屏。然后我尝试了其他方法。
我可以使用画布方法设置背景，但是我不想这样做，因为在每一个动作中我都必须清除背景并重新设置。这会使应用程序变慢，尤其是在手机上。
ctx.drawImage(img,0,0,canvas.width,canvas.height)
我还尝试清除和设置发生移动的特定区域，但这也会导致一些旧手机出现性能问题。
所以..我从头开始...我必须使用样式属性设置背景。
background-image: url("images/backgrounds/1.jpg");
我使用上述属性来设置背景，但它没有工作。我该如何解决这个问题，我怎样才能让它工作？
【问题讨论】：
我已经尝试过了，它是成功的。可能是您没有设置画布的 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>我什至已经测试过它上面的黑色圆圈所示的绘图。
【讨论】：