Javascript canvas.getContext() 不是函数
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14515047/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
canvas.getContext() is not a function
提问by adrian
Currently am doing research on how to interate Coldfusion with Canvas. At the moment, i'm stuck due to javascript error "canvas.getContext('2d'); is not a function".
目前正在研究如何将 Coldfusion 与 Canvas 进行交互。目前，由于 javascript 错误“canvas.getContext('2d'); is not a function”，我被卡住了。
The canvas has to be located inside a div:
画布必须位于 div 内：
<div id="svgbasics" name="svgbasics"></div>
This is the javascript used to generate the image
这是用于生成图像的javascript
var canvas = $('#svgbasics').svg('get').toSVG();
var context = canvas.getContext('2d');
var strDataURI = canvas.toDataURL();
Canvas2Image.saveAsPNG(canvas);
Project's additional info (if needed):
项目的附加信息（如果需要）：
the following libraries are used:
1.7.2/jquery.min.js,jquery.svg.js,base64.jsandcanvas2image.js$('#svgbasics').svg('get').toSVG();returns something like this:<svg xmlns="w3.org/2000/svg"; version="1.1" width="400" height="300"><circle cx="75" cy="75" r="50" fill="none" stroke="red" stroke-width="3"/><g stroke="black" stroke-width="2"><line x1="15" y1="75" x2="135" y2="75"/><line x1="75" y1="15" x2="75" y2="135"/></g></svg>
以下库被使用：
1.7.2/jquery.min.js，jquery.svg.js，base64.js和canvas2image.js$('#svgbasics').svg('get').toSVG();返回如下内容：<svg xmlns="w3.org/2000/svg"; version="1.1" width="400" height="300"><circle cx="75" cy="75" r="50" fill="none" stroke="red" stroke-width="3"/><g stroke="black" stroke-width="2"><line x1="15" y1="75" x2="135" y2="75"/><line x1="75" y1="15" x2="75" y2="135"/></g></svg>
回答by T.Todua
You should refer to <canvas .....> </canvas>element, not <div>or etc !
您应该参考<canvas .....> </canvas>元素，而不是<div>或等！
回答by Darko Z
Try:
尝试：
var canvas = document.getElementById("canvasEl");
var context = canvas.getContext('2d');
Where canvasElis a <canvas id="canvasEl"></canvas>. Your $('#svgbasics').svg('get').toSVG();probably doesn't return an HTML canvas element which it must for the .getContext('2d')to exist.
哪里canvasEl有<canvas id="canvasEl"></canvas>. 您$('#svgbasics').svg('get').toSVG();可能不会返回一个 HTML 画布元素，它必须.getContext('2d')存在。
回答by Philip Tenn
You are confusing SVG canvas with the new HTML5 Canvas.
您将 SVG 画布与新的 HTML5 画布混淆了。
They are different animals. Please take a look at this article for the differences between Canvas and SVG (there is a "Differences between Canvas and SVG" section): http://www.w3schools.com/html/html5_svg.asp
它们是不同的动物。Canvas和SVG的区别请看这篇文章（有“Canvas和SVG的区别”部分）：http: //www.w3schools.com/html/html5_svg.asp
From your script tags, I can see you are using jQuery SVG:
从您的脚本标签中，我可以看到您正在使用 jQuery SVG：
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery.svg.js"></script>
This page shows an example of using getting and manipulating the SVG Canvas: http://keith-wood.name/svg.html.
此页面显示了使用获取和操作 SVG 画布的示例：http: //keith-wood.name/svg.html。
