如何在JavaScript中将画布显示为自定义图像作为背景？

我在将自定义图像（dirt.png）放置在画布上时存在问题，因为它的背景不会落后。真的很难解释这个问题，因为我很难理解代码。这是初学者的东西，希望你们能得到它。感谢名单！如何在JavaScript中将画布显示为自定义图像作为背景？

<!doctype html> 
<html> 
    <head> 
    <title>Ussi l6una</title> 
    <script> 
     var kohad=new Array(); 
     var pikkus=1, d=6, kogus=300; 

     tahvel { 
    background-image:url(dirt.png); 
    } 

     function looKohad(){ 
     for(var i=0; i<kogus; i++){ 
      kohad[i]=new Array(pikkus*i, 1200); 
     } 
     } 

     function arvutaUusTagumine(eesmine, tagumine){ 
     var kaugus=new Array(); 
     kaugus[0]=eesmine[0]-tagumine[0]; 
     kaugus[1]=eesmine[1]-tagumine[1]; 
     var kogukaugus=Math.sqrt(kaugus[0]*kaugus[0]+kaugus[1]*kaugus[1]); 
     var nihe=kogukaugus-pikkus; 
     var dx=kaugus[0]*nihe/kogukaugus; 
     var dy=kaugus[1]*nihe/kogukaugus; 
     return new Array(tagumine[0]+dx, tagumine[1]+dy);  
     } 

     function arvutaUuedKohad(){ 
     console.log(kohad); 
     for(var i=1; i<kogus; i++){ 
      kohad[i]=arvutaUusTagumine(kohad[i-1], kohad[i]); 
     } 
     } 

     function joonistaKohad(g){ 
     for(var i=0; i<kogus; i++){ 
      joonistaKoht(g, kohad[i]) 
     } 
     } 

     function joonistaKoht(g, koht){ 
     g.beginPath(); 
     g.arc(koht[0], koht[1], d, 0, 2*Math.PI, true); 
     g.stroke();  
     } 

     function hiirLiigub(e){ 
     var t=document.getElementById("tahvel"); 
     var g=t.getContext("2d"); 
     var tahvlikoht=t.getBoundingClientRect(); 
     kohad[0][0]=e.clientX-tahvlikoht.left; 
     kohad[0][1]=e.clientY-tahvlikoht.top; 
     arvutaUuedKohad(); 
     g.strokeStyle="#fff"; 
     g.fillStyle="blue"; 
     g.clearRect(0, 0, t.width, t.height); 
     joonistaKohad(g); 
     } 
     looKohad(); 
    </script> 
    </head> 
    <body> 
    <canvas id="tahvel" width="800" height="800" 
     style="background-color: #505050" onmousemove="hiirLiigub(event)"></canvas> 
    </body> 
</html>

来源

2013-11-27 Mister Bobo

您能否描述一下您的代码应该做什么以及它做了什么？此外，你似乎缺少一些代码。例如，在使用它进行绘图之前，您是否确定图像已加载？ – Philipp

在这里，我只想为我的画布放置一个自定义背景，但无法弄清楚如何;对于非英文代码抱歉 –