var fontFamily = 'Arial'
ctx.font = fontSize + ' ' + fontFamily
你理解有误，真正运行的时候是在浏览器，你访问jsp不是直接输入了jsp的路径，而是Controller（或者action）之类的url，而js的路径则直接在生成的html里写着（包含了web-inf部分），而web-inf部分对外接（浏览器）是不可见的，所以一直访问不到。你这个代码看起来没问题，但是其中有些地方的符号是全角的，所以导致出错，建议重新写吧，在英文半角状态下编写代码然后就是变量定义的位置有点问题。
<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>
这个是帮你修改后的代码。
