html5 canvas单击函数在“for”循环中使用错误

时间:2012-10-17 03:34:25

标签: html5 canvas jcanvas

我使用jcanvas插件进行2d tagcloud研究。 我希望我可以在画布上绘制几个标签,每个标签链接到不同的页面。 所以,我需要一个for循环来显示标签, 这是我的代码。

 for(i=1;i<=5;i++){

    $("canvas").drawText({
      layer: true,
      fillStyle: "#9cf",
      strokeStyle: "#000",
      strokeWidth: 1,
      x: 100, y: 30*i,
      text: "tag"+i,
      font: "20pt 'Trebuchet MS', sans-serif",

      // Event bindings
      mouseover: function() {
        $("canvas").css({cursor: "pointer"});
      },
      mouseout: function() {
        $("canvas").css({cursor: "default"});
      },
      // Click link to open it
      click: function(layer) {
        window.open("http://www.google.com/?"+i);
      }
    });
 }

但事实证明每个标签链接到同一个网址,这不是我期望的结果。 这里任何人都可以帮助我!很多!!!

您可以在here中进行测试。

1 个答案:

答案 0 :(得分:1)

添加属性ID(或任何其他名称)并更改功能 ...
font: "20pt 'Trebuchet MS', sans-serif",
id: i,
...
click: function(data) { window.open("http://www.google.com/?"+data.id); }