类型错误：“未定义不是函数”答案

【问题标题】：TypeError: "undefined is not a function"类型错误：“未定义不是函数”
【发布时间】：2014-05-26 00:40:42
【问题描述】：

所以我尝试使用 kinetic.js 创建自定义形状，但遇到了问题。我在单击时调用了一个应该显示新绘图的函数，但出现错误：

Uncaught TypeError: undefined is not a function

功能代码如下：

    function helpShow(){
    var stage = new Kinetic.Stage({
        container: 'SkateboardCanvas',
        width: 800,
        height: 500
    });

    var layer = new Kinetic.Layer();

    var helpMenu = new Kinetic.Shape({
        drawFunc: function(context) {
        context.beginPath();
        context.moveTo(600,500);
        context.lineTo(600,450);
        context.moveTo(200,500);
        context.lineTo(600,500);
        // x1, y1, x2, y2, radius
        console.log(context);
        context.arcTo(600,350,550,350,50);
        context.lineTo(250,350);
        context.moveTo(200,500);
        context.lineTo(200,450);
        context.arcTo(200,350,250,350,50);
        context.closePath();
        context.fillStrokeShape(this);
    },
        fill: 'rgba(255, 255, 255, 0.5)',
        stroke: 'black',
        strokeWidth: 4
    });

    layer.add(helpMenu);
    console.log(layer);
    console.log(stage);
    stage.add(layer);
}

引发错误的行是：

context.arcTo(600,350,550,350,50);

这里是显示所有内容的控制台日志。

Kinetic.Layer {nodeType: "Layer", canvas: Kinetic.SceneCanvas, hitCanvas: Kinetic.HitCanvas, children: Kinetic.Collection[1], _id: 2…} creatorCanvas.js:86

Kinetic.Stage {nodeType: "Stage", children: Kinetic.Collection[0], _id: 1, eventListeners: Object, attrs: Object…} creatorCanvas.js:87

Kinetic.SceneContext {canvas: Kinetic.SceneCanvas, _context: CanvasRenderingContext2D, _fillColor: 函数, _fillPattern: 函数, _fillLinearGradient: 函数…}

此外，画布和上下文在 JavaScript 文件的顶部定义如下：

var canvas = $("#SkateboardCanvas");
var context = canvas.get(0).getContext("2d");

我对这一切都比较陌生，所以任何关于为什么会发生这种情况的帮助/解释都会很棒，或者如果我是一个完全的新手，我很抱歉。

【问题讨论】：

标签： jquery html canvas undefined kineticjs

【解决方案1】：

Kinetic.Shape 提供的上下文实际上是实际画布上下文的包装器。

你得到的包装器不支持 path context.arcTo 命令。

您有几种解决方法：

重构您的形状以使用 context.quadraticCurveTo 而不是 arcTo。
将 Kinetic.Shape 替换为使用屏幕外 html 画布元素作为其图像源的 Kinetic.Image。这样你就可以在离屏画布上使用原生画布的 .arcTo 命令。

这是#2 的演示：http://jsfiddle.net/m1erickson/u69A8/

var myShape=new Kinetic.Image({
    x:10,
    y:10,
    image:drawTab(),
});
layer.add(myShape);
layer.draw();

function drawTab(){
    var canvas=document.createElement("canvas");
    var context=canvas.getContext("2d");
    canvas.width=400;
    canvas.height=150;
    context.save();
    context.translate(-200,-350);
    context.beginPath();
    context.moveTo(600,500);
    context.lineTo(600,450);
    context.moveTo(200,500);
    context.lineTo(600,500);
    // x1, y1, x2, y2, radius
    context.arcTo(600,350,550,350,50);
    context.lineTo(250,350);
    context.moveTo(200,500);
    context.lineTo(200,450);
    context.arcTo(200,350,250,350,50);
    context.closePath();
    context.fillStyle="red";
    context.fill();
    context.restore();
    return(canvas);
}

【讨论】：