javascript - HTML 5 Canvas 在我的元素中不起作用，但相同的代码在 JSFiddle 中有效？

Question

以前有人问过这个问题，但没有一个答案与我相关。

这是我的 fiddle :http://jsfiddle.net/jabark/j6nDN/4/

在我的本地网络元素中，我得到的只是一个空白屏幕。

我不知道问题是什么，这是我试过的:

1) 将其放入 DOM Ready 函数中。
2) 将代码放在相关 Canvas 下方的 body 标签中。
3) 为相关元素赋予与 fiddle 相同的 ID。
4) 将两段JS代码放入WinMerge，确保完全一致。
5) 放入一些基本的 Canvas 代码(有效)。

这是我元素中的相关代码:

<article id="testmm" class="mindmap relative SectionStyle3">
   <canvas id="cv" data-cloudnum="7" class="col col1"></canvas>
   <img id="scream" class="center hide" src="/Images/logo.png" alt="" />
   <img class="cloud hide" src="/Images/clouds/1.png" alt="" />

   <script>    
      var MaxCircles = 7;

      var ctx = $('#cv').get(0).getContext('2d');
      var img = document.getElementById("scream");
      var imgHeight = $("#scream").height();
      var imgWidth = $("#scream").width();

      var TotalHeight = $('#cv').height()
      var TotalWidth = $('#cv').width()
      var CanvasCentre = { x: Math.floor(TotalWidth / 2), y: Math.floor(TotalHeight / 2) };

      var circles = new Array();
      for (var i = 0; i < MaxCircles; i++) {
         circles[i] = { x: 50, y: 50, r: 2 }
      }

      var mainCircle = { x: CanvasCentre.x, y: CanvasCentre.y, r: 2 };

      function drawCircle(data) {
         ctx.beginPath();
         ctx.arc(data.x, data.y, data.r, 0, Math.PI * 2);
         ctx.fill();
      }
      function drawLine(from, to) {
         ctx.beginPath();
         var newX = from.x + (from.width / 2);
         var newY = from.y + (from.height / 2);
         ctx.moveTo(newX, newY);

         //Make Curve Line
         var CentreX = (newX + to.x) / 2
         var CentreY = (newY + to.y) / 2
         var y = Math.floor((Math.random() * 60) - 29);
         if (y == 0) { y = -30 };
         CentreX += y;
         y = Math.floor((Math.random() * 60) - 29);
         if (y == 0) { y = -30 };
         CentreY += y;
         ctx.quadraticCurveTo(CentreX, CentreY, to.x, to.y);

         //Make Straight Line
         //ctx.lineTo(to.x, to.y);

         ctx.stroke();
      }

      function canvasImage(x, y, h, w, img) {
         this.image = img;
         this.x = x;
         this.y = y;
         this.width = w;
         this.height = h;
         return this;
      }

      var canvasImage1 = new canvasImage(CanvasCentre.x, CanvasCentre.y, 0, 0, img);

      drawCircle(mainCircle);

      $.each(circles, function (index) {
         // Make them circle around the middle
         var yradius = CanvasCentre.y
         var xradius = CanvasCentre.x
         yradius -= this.r;
         xradius -= this.r;
         var y = CanvasCentre.y + yradius * Math.sin(2 * Math.PI * (index + 1) / circles.length);
         var x = CanvasCentre.x + xradius * Math.cos(2 * Math.PI * (index + 1) / circles.length);
         this.x = x
         this.y = y

         drawCircle(this);
         drawLine(canvasImage1, this);
      });

      ctx.drawImage(img, CanvasCentre.x - (imgWidth / 2), CanvasCentre.y - (imgHeight / 2), 100, 100);

   </script>
</article>

Answer 1

它不起作用，因为我没有在 Canvas 元素上包含高度和宽度。有人 (Rikonator) 在评论中给出了这个答案，但随后将其删除 :/。

为了使其成为响应式设计 Canvas ，我必须使用窗口调整大小功能来调整 Canvas 大小，然后再次重新填充它。

“如果网页设计很简单，每个人都会这样做”...