11

目前正在研究如何将 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.jscanvas2image.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>

4

3 回答 3

31

您应该参考<canvas .....> </canvas> 元素，而不是<div>等！

于 2014-06-03T16:44:47.417 回答
15

尝试：

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

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

于 2013-01-25T04:06:59.547 回答
5

您将 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。

于 2013-01-25T04:14:40.350 回答