Question

我有画布，可以呈现2个圆圈（维恩图是特定的）。

画布必须支持IE8才能作为后备，我包括Excanvas.js和HTML5shiv，但我收到错误＆gt;

对象在第21行上不支持此属性或方法

属于第21行的代码行是：

var ctx = canvas.getContext("2d");

这是我第一次使用画布，因此我不知道为什么它不起作用，因为我知道有办法让它在IE8中运行。

这是一个SOFiddle：

＆＃13;

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta name="viewport" content="width=device-width" />

  <!--[if IE]>
	<script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/r29/html5.js"></script>
	<script src="//cdn.jsdelivr.net/excanvas/r3/excanvas.js"></script>
  <![endif]-->
</head>
<body>

  <canvas id="canvas" width="260" height="140"></canvas>

  <script>
    var canvas = document.getElementById("canvas");
    var ctx = canvas.getContext("2d");
    var canvas1 = document.createElement("canvas");
    var ctx1 = canvas1.getContext("2d");

    // Calculate the circle positions
    var rawPercentage = '25%';
    var percentage = rawPercentage.replace('%', '');

    var calculateWhiteX = ((percentage / 100) * 65) + 65;
    var calculateGreyX = 196 - ((percentage / 100) * 65);


    var circleWhite = {
      x: calculateWhiteX, // top/bottom
      y: 65, // left/right
      r: 64 // radius/size
    };
    var circleGrey = {
      x: calculateGreyX, // top/bottom
      y: 65, // left/right
      r: 64 // radius/size
    };

    var grey = '#e8e9e9';
    var white = '#FFFFFF';
    var blue = '#1f4e80';

    drawCircle(ctx, circleGrey, grey);
    drawCircle(ctx, circleWhite, white);

    function drawIntersect(a, b, c, notC, color) {

      ctx1.clearRect(0, 0, canvas1.width, canvas1.height);

      ctx1.save();

      // a
      drawCircle(ctx1, a, color);
      // b
      ctx1.globalCompositeOperation = "source-in";
      drawCircle(ctx1, b, color);
      // c
      if (c) {
        drawCircle(ctx1, c, color);
      }
      // notC
      ctx1.globalCompositeOperation = "destination-out";
      if (notC) {
        drawCircle(ctx1, notC, color);
      }

      ctx1.restore();
      ctx.drawImage(canvas1, 0, 0);
    }

    function drawCircle(ctx, circle, color) {
      ctx.beginPath();
      ctx.arc(circle.x, circle.y, circle.r, 0, Math.PI * 2);
      ctx.closePath();
      ctx.fillStyle = color;
      ctx.fill();
      genStroke();
    }

    function genStroke() {
      ctx.lineWidth = 1;
      ctx.strokeStyle = '#d2d2d2';
      ctx.stroke();
    }

    function drawVenn() {
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      drawCircle(ctx, circleGrey, grey);
      drawCircle(ctx, circleWhite, white);
      drawIntersect(circleWhite, circleGrey, null, null, blue);
    }

    drawVenn();
  </script>

</body>
</html>

＆＃13;

任何人都可以解决一些问题，并可能指出我正确的方向吗？

Answer 1

您可能会考虑使用IE＆lt; 9之类的解决方法：

虽然统计数据有所不同，但根据http://www.w3schools.com/browsers/browsers_explorer.asp），IE <9市场份额很小......不到2％。。礼貌但坚定地告诉您的雇主，支持市场份额很小的过时浏览器的努力是不值得的。考虑这是您所参与的编程社区的公共服务。微软本身并没有让IE＆lt; 9保持活力，因此努力填补IE＆lt; 9会导致我们所有程序员都无法使用有用的编程。
提供静态页面并告知用户如果升级到现代浏览器，他们将获得更好的体验。
使用“无头浏览器”在服务器上创建维恩图，并将其作为图像提供给您的页面。 PhantomJS是一个很好的无头浏览器：http://phantomjs.org/
使用SVG代替html Canvas作为显示元素。 SVG具有镜像画布绘制命令的绘图命令。 Microsoft在IE8中使用VML绘图命令对SVG进行了半支持。 RaphaelJS是一个库，它允许您使用SVG绘图命令进行编码，并在IE上自动输出VML＆lt; 9：http://raphaeljs.com/

IE8中的画布错误

1 个答案: