Кто-нибудь знает, почему мой тег холста не отображается в IE 8?

Возможный дубликат:
Как я могу использовать элемент холста HTML5 в IE?

Я не уверен, что делаю не так. Я сделал то, что он сказал, но ничего не работает. Я использую сетку, но не думаю, что это проблема. И я тоже не думаю, что это мои настройки безопасности. Вот мой HTML и Javascript, если это поможет.

HTML

<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Zack Vivier</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!--[if IE]><script type="text/javascript" src="js/excanvas.js"></script><![endif]-->
    <!-- enable HTML5 elements in IE7+8 -->
    <!--[if lt IE 9]>
    <script src="js/html5shiv.js"></script>
    <![endif]-->
    <!-- 1140px Grid styles for IE -->
    <!--[if lte IE 9]><link rel="stylesheet" href="styles/ie.css" type="text/css" media="screen" /><![endif]-->
    <link href="styles/styles.css" rel="stylesheet" type="text/css">
    <link href="styles/1140.css" rel="stylesheet" type="text/css">
    <!--css3-mediaqueries-js - http://code.google.com/p/css3-mediaqueries-js/ - Enables media queries in some unsupported browsers-->
    <script type="text/javascript" src="js/css3-mediaqueries.js"></script>
    <script src="js/js.js"></script>
  </head>
  <body>
    <header>
      <h1 class="hidden">Zack Vivier Home</h1>
      <div class="container">
        <div class="row">
          <div class="fivecol">
            <div class="logo"><img src="images/logo.png" alt="zack vivier logo"></div>
          </div>
          <div class="sevencol last">
            <nav>
              <h2 class="hidden">Site Navigation</h2>
              <ul>
                <li><a href="index.html">Home</a></li>
                <li><a href="info.html">Information</a></li>
                <li><a href="portfolio.html">Portfolio</a></li>
                <li><a href="contact.html">Contact</a></li>
              </ul>
            </nav>
          </div>
        </div>
      </div>
    </header>
    <div class="container">
      <div class="row">
        <div class="twelvecol last">
          <div class="lineone"></div>
        </div>
      </div>
    </div>
    <div class="container">
      <div class="row">
        <div class="twelvecol last">
          <div class="caption">
            <h4 id="tagLine">Image Number</h4>
          </div>
          <div class="slideshow">
            <canvas id='showCanvas' width='1022' height='397'>Canvas Not Supported</canvas>
          </div>
        </div>
      </div>
    </div>
    <div class="container">
      <div class="row">
        <div class="threecol last">
          <div class="about"><h2>About Me</h2></div>
        </div>
      </div>
    </div>
    <div class="container">
      <div class="row">
        <div class="twelvecol last">
          <div class="linetwo"></div>
        </div>
      </div>
    </div>
    <div class="container">
      <div class="row">
        <div class="sevencol last">
          <div class="contenthome">
            <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; My Name is Zack Vivier; currently I am 19</p>
            <p>years old and attend Fanshawe College for Interactive</p>
            <p>Media Design and Production. I am a Designer,</p
            <p>Programmer, Musician, Video Editor, and Animator.</p>
          </div>
        </div>
      </div>
    </div>
    <h1 class="hidden">footer</h1>
    <div class="container">
      <div class="row">
        <div class="twelvecol last">
          <div class="footer">
            <h3>Copyright &copy; 2012 Zack Vivier. All Rights Reserved.</h3>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

Javascript

// JavaScript Document
var imagePaths = new Array("images/photo_1.png", "images/game_web.jpg", "images/tattoo.jpg");
var whichImage = new Array("Graffti Project", "Game WebSite", "Tattoo Project");
var showCanvas;
var showCanvasCtx;
var imageText;
var currentImage = 0;
var currentImageText = 0;
var img = document.createElement("img");
function init() {
  imageText=document.getElementById('tagLine');
  showCanvas = document.getElementById('showCanvas');
  showCanvasCtx = showCanvas.getContext('2d');
  img.setAttribute('width','1022');
  img.setAttribute('height','397');
  switchImage();
  setInterval(switchImage, 2500);
}
function switchImage() {
  imageText.innerHTML = whichImage[currentImageText++];
  img.setAttribute('src',imagePaths[currentImage++]);
  img.onload = function() {
    if (currentImage >= imagePaths.length) {
      currentImage = 0;
      currentImageText = 0;
    }
    showCanvasCtx.drawImage(img,0,0,1022,397);
  }
  window.onload = init();

javascript html internet-explorer html5-canvas excanvas
person zac    schedule 05.12.2012    source источник
comment
Предложения начинаются с заглавной буквы.   -  person Piotr Dobrogost    schedule 05.12.2012
comment
Я использую апостроф, и its - его родительный падеж, а не сокращенная форма it is, и Java не имеет ничего общего с Javascript, и, и, и ...   -  person dda    schedule 05.12.2012
comment
Что заставляет вас думать, что IE8 поддерживает элемент холста? См. Поддержку браузера на странице w3schools.com/html/html5_canvas.asp   -  person Emond Erno    schedule 05.12.2012
comment
Эмо, во-первых, в w3schools не место для такого рода информации, раньше они ошибались. И в нем прямо говорится, что IE9 поддерживает холст, а не IE8.   -  person Stijn_d    schedule 05.12.2012

Ответы (2)


arrow_upward
0
arrow_downward

Canvas - это элемент HTML5, который IE8 не поддерживает. Ваш тип документа также неверен, поскольку вы используете HTML5, установите для него значение: "".

person Dillen Meijboom    schedule 05.12.2012

arrow_upward
0
arrow_downward

Как сказано в комментариях: IE8 не поддерживает тег холста. Однако есть некоторые плагины, которые имитируют его поведение. Однажды я использовал этот: http://flashcanvas.net/, и он выполняет свою работу, есть еще один под названием http://code.google.com/p/explorercanvas/. но у меня нет комментариев по этому поводу, никогда не использовал, не знаю, чего ожидать.

Только одно примечание: у запасных вариантов будут свои ограничения, но что касается 2D-чертежей, я думаю, они вам подойдут.

person Stijn_d    schedule 05.12.2012
comment
да, я пробовал excanvas, но это не сработало - person zac; 05.12.2012
comment
Я использовал flashcanvas для этого приложения dessosports.com/nl/extra, поэтому, возможно, вам стоит попробовать этот, и если у вас возникнут проблемы с реализацией этих плагинов, вы, возможно, можете добавить этот код к своему вопросу или сделать скрипку? - person Stijn_d; 05.12.2012