如何使javascript中的画布显示自定义图像作为背景？_Javascript_Background_Html5 Canvas

如何使javascript中的画布显示自定义图像作为背景？

javascript html5-canvas

如何使javascript中的画布显示自定义图像作为背景？,javascript,background,html5-canvas,Javascript,Background,Html5 Canvas,我在将自定义图像（dirt.png）放在画布上作为背景时遇到了问题，这样它上面的元素就不会在后面了。很难解释这个问题，因为我很难理解代码。这是初学者的东西，希望你们能理解。塔克斯 <!doctype html> <html> <head> <title>Ussi l6una</title> <script> var kohad=new Array(); var pikkus=1,

我在将自定义图像（dirt.png）放在画布上作为背景时遇到了问题，这样它上面的元素就不会在后面了。很难解释这个问题，因为我很难理解代码。这是初学者的东西，希望你们能理解。塔克斯

<!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>


乌西l6una
var kohad=新数组（）；
var pikkus=1，d=6，kogus=300；
塔维尔{
背景图片：url（dirt.png）；
}
函数looKohad（）{
对于（var i=0；i当您有一个静态背景时，为什么不让浏览器渲染引擎为您完成工作
设置背景图像：url（yourbackgroundimage.png），而不是在
标记的样式中设置背景颜色
您能描述一下您的代码应该做什么以及它应该做什么吗？另外，您似乎缺少一些代码。例如，您是否确保在使用图像进行绘图之前加载了图像？在这里，我只想为我的画布添加一个自定义背景，但不知道如何操作；对于非英语代码，我深表歉意