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>
您能否描述一下您的代碼應該做什麼以及它做了什麼?此外,你似乎缺少一些代碼。例如,在使用它進行繪圖之前,您是否確定圖像已加載? – Philipp
在這裏,我只想爲我的畫布放置一個自定義背景,但無法弄清楚如何;對於非英文代碼抱歉 –