Html 基于ID本地下载画布_Html_Canvas_Kineticjs

Html 基于ID本地下载画布

html canvas

Html 基于ID本地下载画布,html,canvas,kineticjs,Html,Canvas,Kineticjs,我已经尝试解决这个问题有一段时间了，但似乎无法解决，基本上我想做的是在画布上添加一个ID，它使用Dynamic js，这在我检查元素时操作代码时起作用。有没有人知道为什么这段代码没有将ID应用到我的画布上，我没有收到任何错误 $(function() { $('.kineticjs-content canvas').id = 'somename'; }); 任何帮助都将不胜感激 Melissa这不起作用的原因是，$（）返回的值是jQuery对象，而不是元素您可以使用数组访问表示法从jQue

我已经尝试解决这个问题有一段时间了，但似乎无法解决，基本上我想做的是在画布上添加一个ID，它使用Dynamic js，这在我检查元素时操作代码时起作用。有没有人知道为什么这段代码没有将ID应用到我的画布上，我没有收到任何错误

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

任何帮助都将不胜感激

Melissa

这不起作用的原因是，

$（）

返回的值是jQuery对象，而不是元素

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

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

（或者使用

$（…）.attr（'id'，'whatever'）

也可以使用）

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

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

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

要获取对场景画布的引用并设置其id，可以执行以下操作：

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

htmlCanvas.id="gotcha";

console.log(htmlCanvas);

[添加：演示]

下面是示例代码和提琴：


原型
正文{padding:20px；}
#容器{
边框：实心1px#ccc；
边缘顶部：10px；
宽度：350px；
高度：350px；
}
$（函数（）{
var阶段=新的动力学阶段({
容器：'容器'，
宽度：350，
身高：350
});
var myLayer=新的dynamic.Layer（）；
stage.add（myLayer）；
//从KineticJS myLayer获取场景（html画布）
var htmlCanvas=myLayer.getContext（）。\u context.canvas；
//为html画布分配一个id
htmlCanvas.id=“gotcha”；
//获取对id为“gotcha”的html画布的引用
var canvas=document.getElementById（“gotcha”）；
var context=canvas.getContext（“2d”）；
//在常规html画布上绘制一些东西（在KineticJS之外）
context.beginPath（）；
弧（100100,20,0，数学PI*2）；
closePath（）；
context.fillStyle=“天蓝色”；
context.strokeStyle=“gray”；
上下文。线宽=3；
context.fill（）；
stroke（）；
}); // end$（函数（）{}）；

Hey Jani，谢谢你的帮助，当我执行你建议的操作时，我出现以下错误：未捕获类型错误：无法设置未定义的属性“id”。感谢回复标记，我收到错误“layer is not defined”，这是我的层名，有什么想法吗？谢谢，阿加尼为您添加了一个示例…：）马克：很好，谢谢你抽出时间，但我似乎无法让它为我的工作，如果你有时间看一下，我会非常感激，我相信这很愚蠢。再次感谢您，您就快到了：只需将myLayer更改为layer；）我怎么会错过呢？这是漫长的一天，我实现了它，没有得到任何错误，虽然id仍然不适用：（谢谢你的帮助。

<!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>