首页 新闻 会员 周边 捐助

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>

jsp
忘记她的主页 忘记她 | 菜鸟二级 | 园豆:224
提问于:2020-12-01 13:38
< >
分享
最佳答案
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>

修正了兩個地方

  1. getClientRects → getContext
  2. beginpath → beginPath
奖励园豆:5
RosonJ | 老鸟四级 |园豆:4910 | 2020-12-01 14:01

这是什么原因导致的?因为学的后端,对jsp不太懂

忘记她 | 园豆:224 (菜鸟二级) | 2020-12-01 14:02

@忘记她:
跟jsp沒啥關係,單純JS方法使用錯誤

  1. Canvas 沒有getClientRects 這個方法
  2. 大小寫錯誤,JS方法幾乎都是CamelCase
RosonJ | 园豆:4910 (老鸟四级) | 2020-12-01 14:05

谢谢

忘记她 | 园豆:224 (菜鸟二级) | 2020-12-01 14:05
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册