然后就是变量定义的位置有点问题。
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/htmlcharset=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 dotyctx = 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>
这个是帮你修改后的代码。
1、window.onload=function(){}
<script type="text/javascript">
window.onload=function(){ //初始化内容 }
</script>
2、写初始化方法,页面顺序执行到初始化方法时初始化
<script type="text/javascript">
function init() { // 初始化内容 }
init()
</script>
3、在body里面写初始化方法.
<body onload='init()'>
</body>
<script type="text/javascript">
function init(){ // 初始化内容 }
</script>
扩展资料
js数组的初始化
方法一：
var myarray = new Array(66,80,90,77,59)
方法二：
var myarray = [66,80,90,77,59]
方法三：
var myarray=new Array(5)
myarray[0]=66
myarray[1]=80
myarray[2]=90
myarray[3]=77
myarray[4]=59
数组的属性：
myarray.length//获得数组长度
