Ошибка холста в IE8

У меня есть холст, который отображает 2 круга (конкретная диаграмма Венна).Ошибка холста в IE8

Полотно должно поддерживать IE8 так, как запасной вариант, я включил Excanvas.js и HTML5shiv, однако я получаю ошибку>

Объект не поддерживает это свойство или метод на линии по 21

строка кода, который принадлежит на линии 21 является:

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

Это мой первый раз, работая с холстом, так что я довольно сл ueless о том, почему он не работает, поскольку я знаю, что есть способы заставить его работать в IE8.

Вот SOFiddle:

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
 
    <meta name="viewport" content="width=device-width" /> 
 

 
    <!--[if IE]> 
 
\t <script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/r29/html5.js"></script> 
 
\t <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>

Может кто-нибудь пролить некоторый свет и, возможно, мне точку в правильном направлении?

источник

2014-12-09 Lodder

Может быть, это поможет? https://stackoverflow.com/questions/22285569/canvas-not-working-in-ie8-browsers/22293779#22293779 – K3N

Вы могли бы рассмотреть обходные пути для IE < 9, как:

Хотя статистические данные меняются, IE < доля 9 рынка мала ... менее чем 2% в зависимости от: http://www.w3schools.com/browsers/browsers_explorer.asp). , Расскажите своему работодателю вежливо, но твердо, что усилия по поддержке устаревших браузеров с крошечной долей рынка не стоят того усилия. Подумайте, что это общественная служба сообщества программирования, в котором вы участвуете. Сама Microsoft не поддерживает IE < 9 живым, поэтому усилия по подгонке IE < 9 заставляют всех нас программистов сдерживаться от полезного программирования.
Предоставьте статические страницы и сообщите пользователю, что у них будет лучший опыт, если они будут обновлены до современного браузера.
Создайте свои диаграммы Венна на сервере, используя «безгласный браузер» и подавайте их на свою страницу в качестве изображения. PhantomJS является хорошим браузером без заголовка: http://phantomjs.org/
Используйте SVG вместо html Canvas как ваш элемент отображения. SVG имеет команды рисования, которые отражают команды рисования холста. Microsoft включила полу-поддержку SVG в IE8 с помощью своих команд рисования VML. RaphaelJS это библиотека, которая позволяет вам код, используя SVG команд рисования и он автоматически выводит на VML IE < 9: http://raphaeljs.com/

источник

2014-12-09 17:47:48 markE

К сожалению, поддержка IE8 не может быть решена, так как клиент является чрезвычайно большой всемирной компанией, пользователей, которые все еще используют IE8. Я сузил вопрос. Он не отображается из-за 'canvas1 = document.createElement (« холст »); ctx1 = canvas1.getContext ("2d"); '. Удаление этого кода рисует белый и серый круги, но не показывает пересечение. – Lodder

Я понимаю давление со стороны «больших мировых клиентов», и я желаю вам удачи в обслуживании уменьшающейся пользовательской базы IE <9, но в качестве компании мы больше не поддерживаем IE <9. Я предлагаю вам использовать PhantomJS для создания ваших диаграмм, а не для подгонки ExCanvas. Удачи с вашим проектом! – markE

Ошибка холста в IE8

ответ

Смежные вопросы