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混淆。

他们是不同的动物。请看一下这篇文章，了解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 Canvas的示例：http://keith-wood.name/svg.html。

canvas.getContext（）不是函数

3 个答案: