11

現在、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>

4

3 に答える 3

15

試す：

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

はどこcanvasElですか<canvas id="canvasEl"></canvas>。$('#svgbasics').svg('get').toSVG();が存在するために必要な HTML キャンバス要素を返さない可能性があります.getContext('2d')。

于 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 に答える