canvas.getContext()不是函数

Question

目前正在研究如何将Coldfusion与Canvas进行交互.目前,我因为javascript错误而被卡住了"canvas.getContext('2d');不是函数".

画布必须位于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>

Answer 1

你应该参考<canvas .....> </canvas> 元素,而不是<div>等等!

Answer 2

尝试:

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

哪里canvasEl是<canvas id="canvasEl"></canvas>.您$('#svgbasics').svg('get').toSVG();可能不会返回HTML画布元素,它必须.getContext('2d')存在.

Answer 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。