3分钟教你绘制一个围棋棋盘

围棋棋盘横竖19条线,如果每一个的大小是20像素X20像素那么棋盘的宽度和高度都应该是20X18(360像素),因为横竖都是18个方格。
今天我们用HTML的画布来绘制棋盘,画布大小400像素X400像素。

<canvas id="canvas" width="400" height="400"></canvas>
<script>
    let canv=document.getElementById("canvas");
    let context=canv.getContext("2d");
    context.beginPath();
    for(let i=0;i<19;i++){
        context.moveTo(10+i*20,10);
        context.lineTo(10+i*20,370);
        context.moveTo(10,10+i*20);
        context.lineTo(370,10+i*20);
    }
    context.stroke();
</script>

代码使用方法:
在电脑桌面新建一个文本文档(txt),把代码复制进文档,保存,把文档后缀 .txt 改成 .html 然后左键双击文件运行。
在这里插入图片描述
这里的知识点无非就是一个for循环,循环19次,每次画一条横线和竖线,棋盘在(10,10)开始,在(370,370)结束,具体细节可看代码颅内思考!
beginPath和stroke函数用来画线。

以下是Java代码,用于绘制一个19 x 19的围棋棋盘: ```java import java.awt.*; import javax.swing.*; public class Goban extends JPanel { private int[][] board; // 用于存储每个点的状态 public Goban() { board = new int[19][19]; // 初始化一个 19 x 19 的二维数组 setPreferredSize(new Dimension(600, 600)); // 设置面板的大小 } @Override public void paintComponent(Graphics g) { super.paintComponent(g); Graphics2D g2d = (Graphics2D) g; g2d.setRenderingHint(RenderingHints.KEY_ANTIALIASING, RenderingHints.VALUE_ANTIALIAS_ON); // 开启抗锯齿 // 绘制棋盘 g2d.setColor(new Color(204, 163, 63)); // 设置棋盘颜色 g2d.fillRect(0, 0, getWidth(), getHeight()); // 填充整个面板 g2d.setColor(Color.BLACK); // 设置线条颜色 for (int i = 1; i <= 18; i++) { g2d.drawLine(50, 50 * i, 900, 50 * i); // 绘制横线 g2d.drawLine(50 * i, 50, 50 * i, 900); // 绘制竖线 } // 绘制星位 int[] starPoint = {3, 9, 15}; // 星位坐标 g2d.fillOval(224, 224, 52, 52); // 绘制中心星位 for (int i : starPoint) { for (int j : starPoint) { g2d.fillOval(i * 50 - 2, j * 50 - 2, 7, 7); } } // 绘制棋子(示例代码) g2d.setColor(Color.BLACK); // 设置黑棋颜色 g2d.fillOval(232, 232, 36, 36); // 绘制黑棋 g2d.setColor(Color.WHITE); // 设置白棋颜色 g2d.fillOval(232 + 50, 232 + 50, 36, 36); // 绘制白棋 } public static void main(String[] args) { JFrame frame = new JFrame("Goban"); // 创建新窗口 Goban panel = new Goban(); // 创建新面板 frame.getContentPane().add(panel); // 将面板添加至窗口 frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); // 设置关闭窗口时退出程序 frame.pack(); // 自动调整窗口大小 frame.setLocationRelativeTo(null); // 居中显示窗口 frame.setVisible(true); // 显示窗口 } } ``` 上述代码会绘制一个19 x 19的围棋棋盘,并在中心和星位上示例绘制了黑棋和白棋。你可以根据实际需求,修改代码实现更丰富的功能。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

代数狂人

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值