jsp里面的画布功能，为什么会出错？求大佬找下问题
0
[已解决问题]
解决于 2020-12-01 16:52
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>五子棋</title>
<style>
* {
margin: 0;
}
canvas {
background: white;
margin: 120px auto;
display: block;
box-shadow: 0px 0px 8px #000
}
</style>
</head>
<body>
<canvas height="450" width="450" id="canvas"></canvas>
<script>
var chess = document.getElementById("canvas");
var ctx = chess.getClientRects("2d");
ctx.strokeStyle="#b3b3b3";
var drawChessBoard = function () {
for(var i = 0 ; i < 15 ; i++){
ctx.moveTo(15+i*30,15);
ctx.lineTo(15+i*30,435);
ctx.stroke();
ctx.moveTo(15,15+i*30);
ctx.lineTo(435,15+i*30);
ctx.stroke();
}
}
drawChessBoard();
ctx.beginpath();
ctx.arc(100,100,50,0,Math.PI*2);
ctx.fillStyle = "red";
ctx.fill();
ctx.stroke();
</script>
</body>
</html>
最佳答案
0
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>五子棋</title>
<style>
* {
margin: 0;
}
canvas {
background: white;
margin: 120px auto;
display: block;
box-shadow: 0px 0px 8px #000
}
</style>
</head>
<body>
<canvas height="450" width="450" id="canvas"></canvas>
<script>
var chess = document.getElementById("canvas");
var ctx = chess.getContext("2d");
ctx.strokeStyle = "#b3b3b3";
var drawChessBoard = function () {
for (var i = 0; i < 15; i++) {
ctx.moveTo(15 + i * 30, 15);
ctx.lineTo(15 + i * 30, 435);
ctx.stroke();
ctx.moveTo(15, 15 + i * 30);
ctx.lineTo(435, 15 + i * 30);
ctx.stroke();
}
}
drawChessBoard();
ctx.beginPath();
ctx.arc(100, 100, 50, 0, Math.PI * 2);
ctx.fillStyle = "red";
ctx.fill();
ctx.stroke();
</script>
</body>
</html>
修正了兩個地方
- getClientRects → getContext
- beginpath → beginPath
奖励园豆：5
这是什么原因导致的？因为学的后端，对jsp不太懂
@忘记她:
跟jsp沒啥關係，單純JS方法使用錯誤
- Canvas 沒有getClientRects 這個方法
- 大小寫錯誤，JS方法幾乎都是CamelCase
谢谢