jsp里面的画布功能，为什么会出错？求大佬找下问题

2020-12-01 16:24发布

站内问答 / 前沿技术
378 1 4

<!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
举报
1条回答
聊天终结者
2楼-- · 2020-12-01 16:45 
<!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
查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(4)