我正在使用jCanvas在HTML canvas
元素上绘画。首先,我初始化一个x * x表,每个单元格都有一个画布:
function init(size) {
// Adding the board table to the body
$("#content").append("<table class=\"board\">");
for(i=0; i<size; i++) {
$(".board").append("<tr>")
for(j=0; j<size ; j++) {
$(".board tr:last-child").append("<td class=\"square\">");
}
}
// Setting size to match width or height, whichever i smallest
var h = $("#content").height();
var w = $("#content").width();
var rez = (w > h) ? h : w;
var cSize = rez / size;
$(".board td").append("<canvas width="+cSize+" height="+cSize+" />");
$(".board").css("width",rez);
$(".board").css("height",rez);
// Drawing icons on the board
var c = $("canvas");
var icns = new Array(11);
for(i=0; i<11; i++)
icns[i] = "svg/"+ params["hvor"] +"/"+ (i+1) +".svg";
for(i=0; i<c.length; i++) {
var rand = Math.floor(Math.random()*(icns.length-1));
var icn = icns[rand];
icns.splice($.inArray(icns[rand], icns), 1);
$(c[i]).drawImage({
source: icn,
height: cSize,
fromCenter: false
});
}
}
这很好用,图像在画布上绘制。然后我尝试添加一个具有新形状的图层(之后必须将其删除,这就是我使用图层的原因)。
$('td').click(function(){
var h = $(this).height() -2;
var o = h / 3.5;
var t = h / 10;
$(this).children("canvas").addLayer({
method: "drawLine",
strokeStyle: "#5cfe15",
strokeWidth: t,
x1: o, y1: o*2,
x2: h/2, y2: h-o,
x3: o*3, y3: o-t
});
});
那是我收到错误Uncaught TypeError: Object [object Object] has no method 'addLayer'
的时候。如果我只使用drawLine()
代替addLayer()
它实际绘制线条,那么对象显然是画布。
我在这里缺少什么?
答案 0 :(得分:2)
确保你使用的是jCanvas v5.0,因为它为jQuery集合引入了addLayer()方法(即$ .fn)。
-Caleb