無法讀取null的屬性'getContext'

我有一個按鈕，它會在點擊執行此功能。此代碼是在畫布元素上繪製一條線，PDF文件通過使用PDF.JS在網頁上呈現。但是我得到一個錯誤「Uncaught TypeError：無法讀取'null'的屬性'getContext'。我該怎麼辦。無法讀取null的屬性'getContext'

function abc() 
{ 
alert("msg"); 
var c=document.getElementById("canvas1"); 
alert(c); 
var ctx= c.getContext('2d'); 
alert(ctx); 
ctx.beginPath(); 
ctx.moveTo(0,0); 
ctx.lineTo(300,150); 
ctx.stroke(); 
}

來源

2014-03-19 Aditya.M

你有一個ID爲'canvas1'的元素嗎？錯誤強烈表明你不會！ – adeneo

如果canvas1被定義在正在使用它的腳本標記下面，你也會有同樣的錯誤 – async5

首先，你應該檢查空：

var c = document.getElementById("canvas1"); 
if (c != null) { 
    // proceed 
} else { 
    // a problem: what can you do about it? 
}

其次，要確保你有一個元素canvas1 - 如果它存在，那麼c不應該null;如果它不存在，那麼代碼和內容之間存在差異，並且您需要決定在發生這種情況時應該發生什麼，如果它應該發生從不發生，那麼這是例外情況，也許您希望提出錯誤，或者你自己指定的消息，或者其他東西。

來源

2014-03-19 13:39:09

+1我不知道爲什麼這是downvoted。 –

使用pdf.js在我的網站上呈現PDF文件。我無法訪問pdf文件在其上呈現的畫布。這段代碼是程序的一部分。我試過你的解決方案，顯然'c'爲空。如果您瞭解pdf.js，請幫助我。感謝你的幫助。 –

如果'c'是'null'，那麼你沒有'id =「canvas1」'的畫布。將其更改爲您的畫布的ID。 –

你的代碼的工作，據我可以告訴（剛剛添加以下HTML）：

<button onclick="abc()">button</button> 
<canvas id="canvas1" height="300" width="300"/>

http://jsfiddle.net/qBHRg/

來源

2014-03-19 13:41:28 Johan

一些方法來檢查錯誤：

// if all else fails 
try { 
    var canvas = document.getElementById('canvas1'); 

    // if canvas element doesn't exist... 
    if(!canvas) 
     { console.log('Canvas not found.'); } 
    else { 
     // if the getContext method doesn't exist (old browser) 
     if(!canvas.getContext) 
      { console.log('Context not supported.'); } 
     else { 
      var context = canvas.getContext('2d'); 

      // if this particular context isn't supported 
      if(!context) 
       { console.log('Context 2D not available.'); } 
      else { 
       context.beginPath(); 
       context.moveTo(0,0); 
       context.lineTo(300,150); 
       context.stroke(); 
      } 
     } 
    } 
} 
catch(exc) 
    { console.log(exc); }

來源

2014-03-19 13:44:03

它有什麼問題？ –

沒有錯......我懷疑OP在他的代碼中有其他地方問題。 +1來扭轉別人的劣勢。 – markE

假設你的提醒報告您對畫布和上下文有有效的引用：

提示＃1：HTMLCanvasElement和

警報＃2：CanvasRenderingContext2D（或這些您的瀏覽器版本）

然後你給出的代碼將在HTML5畫布工作（沒有錯誤）。

由於您正在使用pdf.js，因此您的錯誤可能在您未向我們顯示的代碼中。

確保你餵養pdf.js一個有效的上下文

CanvasRenderingContext2D

// test if the context you're feeding pdf.js is valid 

alert(ctx); 

// feed pdf.js the context 

var myPDFContext = { 
    canvasContext: ctx, 
    viewport: viewport 
}; 
page.render(myPDFContext);

來源

2014-03-19 16:28:53 markE