js中函数明明已经定义，但还是说找不到，请大神指点已经定义了init函数，但还是说找不到init函数

Posted 2023-05-06

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了js中函数明明已经定义，但还是说找不到，请大神指点已经定义了init函数，但还是说找不到init函数相关的知识，希望对你有一定的参考价值。

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Throwing 1 die</title>
<script type="text/javascript" >
var cwidth = 400;//保存画布的宽度
var cheight = 300;//保存画布的高度
var dicex = 50;//保存骰子的水平位置
var dicey = 50;//保存骰子的垂直位置
var dicewidth = 100;//保存骰子的宽度
var diceheight = 100;//保存骰子的高度
var dotrad = 6;//骰子的半径
var ctx;
function init()
ctx.fillRect(50,50,100,100);
drawface(1);
;
function drawface(n)
ctx = document.getElementById('c1').getContext('2d');
ctx.lineWidth = 5;//设置骰子的边框的厚度
ctx.clearRect(dicex,dicey,dicewidth,diceheight);//清除原来画的骰子
ctx.strokeRect(dicex,dicey,dicewidth,diceheight);//画骰子
ctx.fillStyle = "#009966";//设置园的颜色
switch(n) //判断n是几
case 1:
Draw1();
break;
case 2：
Draw2();
break;

function Draw1()
var dotx;//保存单个圆点的水平位置
var doty;//保存单个圆点的垂直位置
ctx = document.getElementById('c1').getContext('2d');
dotx = dicex + dicewidth * 0.5;
doty = dicey + diceheight * 0.5;
ctx.beginPath();//开始路径
ctx.arc(dotx,doty,dotrad,0,Math.PI* 2,true);//画圆
ctx.closePath();//结束路径
ctx.fill();//填充圆

function Draw2()
var dotx;
var doty;
ctx = document.getElementById('c1').getContext('2d');
dotx = dicex + dotrad * 3;
doty = dicey + dotrad * 3;
ctx.beginPath();
ctx.arc(dotx,doty,dotrad,0,Math.PI*2,true);
dotx = dicex + dicewidth - dotrad * 3;
doty = dicey + diceheight - dotrad * 3;
ctx.arc(dotx,doty,dotrad,0,Math.PI * 2,true);
ctx.closePath();
ctx.fill();

</script>
</head>
<body onload="init();">
<canvas id="c1" width="400" height="300">
your browers
</canvas>
</body>
</html>

你这个代码看起来没问题，但是其中有些地方的符号是全角的，所以导致出错，建议重新写吧，在英文半角状态下编写代码
然后就是变量定义的位置有点问题。
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Throwing 1 die</title>
<script type="text/javascript" >
var cwidth = 400;//保存画布的宽度
var cheight = 300;//保存画布的高度
var dicex = 50;//保存骰子的水平位置
var dicey = 50;//保存骰子的垂直位置
var dicewidth = 100;//保存骰子的宽度
var diceheight = 100;//保存骰子的高度
var dotrad = 6;//骰子的半径
var ctx;
function init()

ctx = document.getElementById('c1').getContext('2d');
ctx.fillRect(50,50,100,100);
drawface(1);
;
function drawface(n)

ctx.lineWidth = 5;//设置骰子的边框的厚度
ctx.clearRect(dicex,dicey,dicewidth,diceheight);//清除原来画的骰子
ctx.strokeRect(dicex,dicey,dicewidth,diceheight);//画骰子
ctx.fillStyle = "#009966";//设置园的颜色
switch(n)

//判断n是几
case 1: Draw1();
break;
case 2: Draw2();
break;

function Draw1()

var dotx;//保存单个圆点的水平位置
var doty;//保存单个圆点的垂直位置
ctx = document.getElementById('c1').getContext('2d');
dotx = dicex + dicewidth * 0.5;
doty = dicey + diceheight * 0.5;
ctx.beginPath();//开始路径
ctx.arc(dotx,doty,dotrad,0,Math.PI* 2,true);//画圆
ctx.closePath();//结束路径
ctx.fill();//填充圆

function Draw2()

var dotx;
var doty;ctx = document.getElementById('c1').getContext('2d');
dotx = dicex + dotrad * 3;
doty = dicey + dotrad * 3;
ctx.beginPath();
ctx.arc(dotx,doty,dotrad,0,Math.PI*2,true);
dotx = dicex + dicewidth - dotrad * 3;
doty = dicey + diceheight - dotrad * 3;
ctx.arc(dotx,doty,dotrad,0,Math.PI * 2,true);
ctx.closePath();
ctx.fill();

</script>
</head>
<body onload="init();">
<canvas id="c1" width="400" height="300">your browers </canvas>
</body>
</html>
这个是帮你修改后的代码。参考技术A 最好有报错信息
还有就是把js写在页面最下面。
因为页面上的元素没有加载完全，可能会报对象不存在的错误参考技术B 第一：
case 2：后面你可能是粗心大意了，尽然是全角逗号，报错，改成半角的

第二：
fillRect在代码中我没有找到定义的地方，报错