根据ID本地下载canvas答案

【问题标题】：Downloading canvas locally based on ID根据ID本地下载canvas
【发布时间】：2014-01-07 21:08:29
【问题描述】：

我一直在尝试解决这个问题一段时间，但似乎无法解决，基本上我想要做的是向使用动力学 js 的画布添加一个 ID，当我在检查元素。有谁知道为什么这段代码没有将 ID 应用到我的画布上，我没有收到任何错误；

 $(function() {
$('.kineticjs-content canvas').id = 'somename';
});

任何帮助将不胜感激。

梅丽莎

【问题讨论】：

标签： html canvas kineticjs

【解决方案1】：

创建层时，KineticJS 实际上创建了 2 个 html 画布。

一个画布用于命中测试（仅供内部使用）。

一个画布用于绘制场景（这是你想要的）。

要获得对场景画布的引用并设置其 id，您可以这样做：

var htmlCanvas = myLayer.getContext()._context.canvas;

htmlCanvas.id="gotcha";

console.log(htmlCanvas);

[补充：演示]

这里是示例代码和一个 Fiddle：http://jsfiddle.net/m1erickson/LmCgw/

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Prototype</title>
    <script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
    <script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.7.2.min.js"></script>

<style>
body{padding:20px;}
#container{
  border:solid 1px #ccc;
  margin-top: 10px;
  width:350px;
  height:350px;
}
</style>        
<script>
$(function(){

    var stage = new Kinetic.Stage({
        container: 'container',
        width: 350,
        height: 350
    });
    var myLayer = new Kinetic.Layer();
    stage.add(myLayer);

    // get the Scene (html canvas) from KineticJS myLayer

    var htmlCanvas=myLayer.getContext()._context.canvas;

    // assign an id to that html canvas

    htmlCanvas.id="gotcha";


    // get a reference to the html canvas with id of "gotcha"

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

    // draw something on the regular html canvas (outside KineticJS)

    context.beginPath();
    context.arc(100,100,20,0,Math.PI*2);
    context.closePath();
    context.fillStyle="skyblue";
    context.strokeStyle="gray";
    context.lineWidth=3;
    context.fill();
    context.stroke();

}); // end $(function(){});

</script>       
</head>

<body>
    <div id="container"></div>
</body>
</html>

【讨论】：

感谢马克的回复，我收到错误“未定义层”，这是我的层的名称，有什么想法吗？再次感谢
我添加了一个示例供您查看... :)
Mark 这很好用，谢谢你的时间，但我似乎无法让它为我的工作，如果你有时间看一下，我真的很感激，我确定它有些愚蠢。再次感谢jsfiddle.net/FT26S
快到了：只需将 myLayer 更改为 layer ;)
我怎么会错过呢？这是漫长的一天，我实现了它并且没有收到任何错误，尽管 id 仍然不适用:( 感谢您的所有帮助。

【解决方案2】：

这不起作用的原因是$()返回的值是一个jQuery对象，而不是一个元素。

您可以使用数组访问表示法访问 jQuery 对象中的各个元素，因此对于您的情况，这应该可以：

$('.kineticjs-content canvas')[0].id = 'somename';

（也可以使用$(...).attr('id', 'whatever')）

【讨论】：

嗨 Jani，感谢您的帮助，当我按照您的建议执行操作时，我收到以下错误：Uncaught TypeError: Cannot set property 'id' of undefined.