无法获取画布的上下文

当我想要获取画布的上下文时，我遇到了一个问题。下面是HTML代码：无法获取画布的上下文

<canvas id="thecanvas" width="600" height="300"></canvas>

和JavaScript：

var canvaso = document.getElementById('thecanvas'); 
if (!canvaso) { 
    alert('Error: Cannot find the canvas element!'); 
    return; 
} 
if (!canvaso.getContext) { 
    alert('Error: Canvas context does not exist!'); 
    return; 
}

的 “canvaso” 变量是否正确装入，但它没有对 “canvaso.getContext”：

Uncaught TypeError: Object #<HTMLDivElement> has no method 'getContext'

感谢您的帮助。

来源

2012-07-27 user1558569

你是什么浏览器？ – 2012-07-27 20:57:25

http://caniuse.com/#feat=canvas – Joe 2012-07-27 21:02:46

看看您的浏览器是否真的符合html5 http://www.smashcat.org/av/canvas_test/ http://html5test.com – Frobzig 2012-07-27 21:03:07

您的浏览器与HTML5不兼容。符合标准的浏览器将返回Object #<HTMLCanvasElement> has no method 'getContext'（尽管getContext方法可行）

Works fine here，你确定你有同一页上的canvas的id的画布吗？

这里是一个可能性：你有没有在你的文档的任何地方定义一个div的编号为thecanvas，很可能是在画布之后？重复的IDS在语义上不正确，并且getElementById将返回DOM中最后一次出现的ID。

来源

2012-07-27 20:59:28 Austin

我的网页浏览器与HTML5兼容（我使用chrome），并且我有其他网页的画布功能，但不是这个。 – user1558569 2012-07-27 21:52:23

你是对的对象。我得到一个HTMLDivElement而不是HTMLCanvasElement，但我不知道为什么！ – user1558569 2012-07-27 21:54:24

查看编辑，在js小提琴中正常工作。这是一种可能性：你有没有在你的文档中的任何地方定义一个带有'thecanvas'的'div'？重复的IDS在语义上不正确，并且'getElementById'将返回该Id的最后一次出现。 – Austin 2012-07-28 01:00:45

试试这个（见演示：http://jsbin.com/ijazum/1）：

<body> 
    <canvas id="canvas" width="600" height="300"></canvas> 

    <script> 
    function getStart() { 
     var canvas = document.getElementById('canvas'); 

     if (!canvas) { 
     alert('Error: Cannot find the canvas element!'); 
     return; 
     } 

     if (!canvas.getContext) { 
     alert('Error: Canvas context does not exist!'); 
     return; 
     } 

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

     ctx.fillStyle = "#3d3"; 
     ctx.fillRect(0, 0, 100, 100); 
    } 

    getStart(); 
    </script> 
</body>

来源

2012-07-27 21:30:14

这可能是因为您加载你的JavaScript在页面<head>块的外部文件。这意味着您的JavaScript在加载其他HTML元素（例如<canvas>元素）之前运行。这就是为什么您的浏览器无法在页面上找到具有给定ID的任何元素 - 因为此时画布元素不存在。

有几个解决方案，以这样的：

输入您的javascript代码为<script>块之后任何时候，你声明<canvas>块。
将您的JavaScript代码插入函数中，然后将该函数作为对页面上任何活动（例如单击按钮或加载页面（使用<body>标记中的onload属性））的反应来调用。

第二个解决方案的样品已被如下图所示：

的index.html：

<!DOCTYPE html> 
<html> 
<head> 
    <script src="myscript.js"> </script> 
</head> 
<body onload="test()"> 
    <canvas id="thecanvas" width="600" height="300"></canvas> 
</body> 
</html>

myscript.js：

function test() { 
    var canvaso = document.getElementById('thecanvas'); 
    if (!canvaso) { 
     alert('Error: Cannot find the canvas element!'); 
     return; 
    } 
    else if (!canvaso.getContext) { 
     alert('Error: Canvas context does not exist!'); 
     return; 
    } 
    else { 
     alert('Success!'); 
    } 
}

来源

2016-12-19 21:01:08 Artezanz

那么它是什么意思呢，canvas上下文不存在....如果它在第一个if语句中找到它，为什么它不存在？ – gunslingor 2017-03-11 19:10:13

无法获取画布的上下文

回答

相关问题