Javascript 调用函数总是返回TypeError
我试图创建动画来学习画布，我的代码总是返回Javascript 调用函数总是返回TypeError,javascript,html,canvas,html5-canvas,Javascript,Html,Canvas,Html5 Canvas,我试图创建动画来学习画布，我的代码总是返回TypeError:xxx不是一个函数，其中xxx是第一个函数中的任何东西 无论第一个调用函数中的第一个是什么，它都会指向该元素崩溃。在当前异常中，它将抛出TypeError:ctx.beginPath不是函数。我不知道怎么了 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>test&l
TypeError:xxx不是一个函数xxxTypeError:ctx.beginPath不是函数<!DOCTYPE html>
<html
lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
<body>
<p>
<canvas id="canvasImg" style="width: 500px; height: 500px; border: solid 1px #000;">
</canvas>
</p>
<script>
window.requestAnimFrame = (function(){
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
function( callback ){
window.setTimeout(callback, 1000 / 60);
};
})();
function activate() {
var canvas = document.getElementById('canvasImg');
canvas.width = 500;
canvas.height = 500;
var fill_styles = ["#aa0000", "#a0a000", "#a00a00", "#a000a0", '#a0000a', "#0aa000", "#0a0a00", "#0a00a0", "#0a000a", "#00aa00", "#00a0a0", "#00a00a", "#000aa0", "#000a0a", "#0000aa"];
var counter = 0;
var ctx = canvas.getContext('2d');
document.getElementById('canvasImg').addEventListener("click", function(event) {
mnoznik = fill_styles.indexOf(ctx.fillStyle)+1;
currentStyle = ctx.fillStyle ? fill_styles[ mnoznik % fill_styles.length ] : fill_styles[0];
draw(ctx, currentStyle);
});
function addFill(ctx) {
ctx.beginPath();
ctx.fillRect (0, 0, canvas.width, canvas.height);
ctx.clearRect(canvas.width/4, canvas.height/4, canvas.width/2, canvas.height/2);
for(var i = 1; i<13; i++){
ctx.strokeRect(canvas.width/4+(10*i), canvas.height/4+(10*i), canvas.width/2-(20*i), canvas.height/2-(20*i));
};
ctx.closePath();
ctx.fill();
}
function addCrossedLines(ctx) {
ctx.beginPath();
ctx.moveTo(0,0);
ctx.lineTo(canvas.width, canvas.height);
ctx.moveTo(0,canvas.height);
ctx.lineTo(canvas.width, 0);
ctx.closePath();
ctx.stroke();
ctx.fill();
}
function addCircle(ctx, deg) {
ctx.beginPath();
ctx.arc(canvas.width/2, canvas.height/2, (canvas.width+canvas.height)/5, deg*Math.PI, 2*Math.PI);
ctx.closePath();
ctx.fill();
ctx.stroke();
}
function draw(ctx, currentStyle) {
requestAnimationFrame(draw);
ctx.fillStyle = currentStyle;
addFill(ctx);
addCrossedLines(ctx);
ctx.fillStyle = "transparent";
addCircle(ctx, counter/180);
counter++;
console.log(counter);
}
}
window.onload = activate;
</script>
</body>
</html>
测试
window.requestAnimFrame=（函数（）{
return window.requestAnimationFrame||
window.webkitRequestAnimationFrame||
window.mozRequestAnimationFrame||
函数（回调）{
设置超时（回调，1000/60）；
};
})();
函数激活（）{
var canvas=document.getElementById（'canvasImg'）；
画布宽度=500；
高度=500；
var fill_styles=[“#aa0000”、“#a00a00”、“#a00a00”、“#a000a”、“#a000a”、“#0a000a”、“#0a00a00”、“#0a00a000a”、“#0a000a”、“#00a000a”、“#a000a”、“#a000a”、#；
var计数器=0；
var ctx=canvas.getContext（'2d'）；
document.getElementById（'canvasImg'）。addEventListener（“单击”，函数（事件）{
mnoznik=fill_styles.indexOf（ctx.fillStyle）+1；
currentStyle=ctx.fillStyle？填充样式[mnoznik%fill_styles.length]：填充样式[0]；
绘制（ctx、currentStyle）；
});
函数addFill（ctx）{
ctx.beginPath（）；
ctx.fillRect（0,0，canvas.width，canvas.height）；
ctx.clearRect（canvas.width/4，canvas.height/4，canvas.width/2，canvas.height/2）；
对于（变量i=1；输入此：window.onload=activate（）
@Kevin Kloet，窗口。onload
与所述一样好。您的代码在JSFIDLE上工作：您是在本地运行Web服务器，还是只需单击它就可以在浏览器中打开文件？您的绘图函数具有参数ctx
，但当您使用requestAnimationFrame
时，回调的第一个参数是time。hencetypeof ctx==“number”
没有附加2dAPI。ctx
对于主活动函数是全局的。您不需要将其传递到绘图。在您询问之前，您不能将任何参数传递到requestAnimationFrame
回调尝试以下操作：window.onload=activate（）
@Kevin Kloet，窗口。onload
与所述一样好。您的代码在JSFIDLE上工作：您是在本地运行Web服务器，还是只需单击它就可以在浏览器中打开文件？您的绘图函数具有参数ctx
，但当您使用requestAnimationFrame
时，回调的第一个参数是time。hencetypeof ctx==“number”
没有附加2dAPI。ctx
对于主活动函数是全局的。您不需要传递它来绘制。在您询问之前，您不能向requestAnimationFrame
回调传递任何参数