Question

我编写了一个简单的jQuery代码：

canvas = $('#canvas'); ctx = canvas.getContext('2d');

得到＆＃39; TypeError：canvas.getContext不是一个函数＆＃39;错误。我在这里研究过;虽然程序员遇到类似问题也有类似的问题，但他们的背景却不同。我也在同一行中收到以下其他错误：

at i (jquery.min.js:2) at Object.fireWith [as resolveWith] (jquery.min.js:2) at Function.ready (jquery.min.js:2) at HTMLDocument.J (jquery.min.js:2)

这是我的jQ代码：

$(function () {
var arr_touches = [];
var canvas;
var ctx;
var down = false;
var color = 'black';
var width = 5;

canvas = $('#canvas');
ctx = canvas.getContext('2d');
ctx.lineWidth = width;
canvas.on({
    mousemove: function(e){
    xPos = e.clientX-canvas.offsetLeft;
    yPos = e.clientY-canvas.offsetTop;
   if(down == true)
     {
    ctx.lineTo(xPos,yPos); //create a line from old point to new one
    ctx.strokeStyle = color;
    ctx.stroke();
    }
}, 
mousedown:function(){
    down = true;
    ctx.beginPath();
    ctx.moveTo(xPos, yPos);
}, 
mouseup:function(){
    down = false;
},
//handling mobile touch events
touchstart:function(evt){
    var touches = evt.changedTouches;
    for(var i = 0; i < touches.length; i++) 
       {
           if(isValidTouch(touches[i])) 
              {
               evt.preventDefault();
               arr_touches.push(copyTouch(touches[i]));
               ctx.beginPath();
               ctx.fillStyle = color;
               ctx.fill();
            }
        }
});

Answer 1

.getContext()不是有效的jquery方法。它是HTML canvas元素上的有效方法。参考MDN。

我认为您正在寻找的是：

canvas = document.getElementById('canvas');

请参阅fiddle

TypeError：canvas.getContext（＆＃39; 2d＆＃39;）不是函数

1 个答案: