canvas.getContext() 不是函数答案

【问题标题】：canvas.getContext() is not a functioncanvas.getContext() 不是函数
【发布时间】：2013-01-25 03:51:26
【问题描述】：

目前正在研究如何将 Coldfusion 与 Canvas 交互。目前，由于 javascript 错误“canvas.getContext('2d'); is not a function”，我被卡住了。

画布必须位于 div 内：

<div id="svgbasics" name="svgbasics"></div>

这是用于生成图像的 javascript

var canvas = $('#svgbasics').svg('get').toSVG();
var context = canvas.getContext('2d');
var strDataURI = canvas.toDataURL();
Canvas2Image.saveAsPNG(canvas);

项目的附加信息（如果需要）：

使用了以下库：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>

【问题讨论】：

.svg('get').toSVG(); ?如果那个东西没有返回一个画布元素，你就无法获得任何上下文。
请张贴svgbasics div的全部内容。
对不起，我对这个非常陌生。在这种情况下，它返回如下内容：
@adrian 请更新您的问题，在 cmets 中很难阅读。
SVG 和 Canvas 是两个不同的东西（一方面 SVG 没有 getContext()）。这将为您提供有关该主题的更多信息：w3schools.com/html/html5_svg.asp

标签： javascript canvas

【解决方案1】：

您应该引用<canvas .....> </canvas> 元素，而不是<div> 或等等！

【讨论】：

【解决方案2】：

试试：

var canvas = document.getElementById("canvasEl");
var context = canvas.getContext('2d');

其中canvasEl 是<canvas id="canvasEl"></canvas>。您的 $('#svgbasics').svg('get').toSVG(); 可能不会返回 HTML 画布元素，.getContext('2d') 必须存在该元素。

【讨论】：

【解决方案3】：

您将 SVG 画布与新的 HTML5 画布混淆了。

它们是不同的动物。请看这篇文章，了解 Canvas 和 SVG 之间的区别（有一个“Canvas 和 SVG 之间的区别”部分）：http://www.w3schools.com/html/html5_svg.asp

从您的脚本标签中，我可以看到您正在使用 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>

此页面显示了使用获取和操作 SVG 画布的示例：http://keith-wood.name/svg.html。

【讨论】：

嗯.. 谢谢大家。我需要重新考虑我的选择可能会征求您对此的意见。该项目基本上允许用户在图像上选择要放置标记的区域。例如，地图将加载到屏幕上，任何用户触摸或点击地图的任何位置，都会在现场自动创建一个标记。像“X标记现场”之类的东西。然后系统会将标记的地图保存为图像并上传到服务器以存储关于我应该使用或尝试这个项目的任何意见？