2013-11-27 81 views
0

我在將自定義圖像(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> 
+0

您能否描述一下您的代碼應該做什麼以及它做了什麼?此外,你似乎缺少一些代碼。例如,在使用它進行繪圖之前,您是否確定圖像已加載? – Philipp

+0

在這裏,我只想爲我的畫布放置一個自定義背景,但無法弄清楚如何;對於非英文代碼抱歉 –

回答

0

當你有一個靜態的背景,那麼爲什麼不能讓瀏覽器渲染引擎做的工作適合你?

代替以<canvas>標記的樣式設置背景色,請設置background-image:url(yourbackgroundimage.png)