Question

之前已经问过这个问题，但没有一个答案与我有关。

这是我的小提琴：http://jsfiddle.net/jabark/j6nDN/4/

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

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

1）将其置于DOM Ready功能中 2）将代码放在相关画布下方的body标签内 3）给相关元素提供与小提琴相同的ID 4）将JS Code的两个部分放入WinMerge以确保完全相同 5）放入一些基本的画布代码（有效）。

这是我项目中的相关代码：

<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

它没有用，因为我没有在画布元素上包含高度和宽度。有人（Rikonator）在评论中给出了这个答案，但随后将其删除：/ 。

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

＆＃34;如果网页设计很简单，那么每个人都会这样做＆＃34; ......

Answer 2

它对我来说很好。我唯一可以做的就是破解它（在jsFiddle上更改代码之外）是不加载jQuery。非常你的jQuery正确加载。我将使用来自CDN的jQuery加载来发布我的代码的工作版本，所以毫无疑问。破碎的图像当然是因为它们是您的本地人。为了澄清，我在body标签中没有更改任何代码。

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
  </head>
  <body>
    <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>

  </body>
</html>

HTML 5 Canvas在我的项目中不起作用，但相同的代码在JSFiddle中有效吗？

2 个答案: