-->

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

2020-12-01 16:35发布

站内文章 / 移动开发

187 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>

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:

<!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>

修正了兩個地方