使用canvas画一个军棋的棋盘 

<!DOCTYPE html>
<html>
<head>
<title>军棋棋盘</title>
<style>
canvas {
  background-color: #f0d9b5; /* 棋盘背景色 */
  display: block;
  margin: 20px auto;
}
</style>
</head>
<body>

<canvas id="junqiboard" width="500" height="600"></canvas>

<script>
const canvas = document.getElementById('junqiboard');
const ctx = canvas.getContext('2d');

const gridSize = 50; // 格子大小
const boardWidth = 10 * gridSize; // 棋盘宽度
const boardHeight = 12 * gridSize; // 棋盘高度

// 绘制棋盘
function drawBoard() {
  ctx.lineWidth = 2;
  ctx.strokeStyle = '#000';

  for (let i = 0; i < 12; i++) {
    ctx.beginPath();
    ctx.moveTo(0, i * gridSize);
    ctx.lineTo(boardWidth, i * gridSize);
    ctx.stroke();
  }

  for (let i = 0; i < 10; i++) {
    ctx.beginPath();
    ctx.moveTo(i * gridSize, 0);
    ctx.lineTo(i * gridSize, boardHeight);
    ctx.stroke();
  }


  // 绘制行营
  function drawCamp(x, y) {
    ctx.beginPath();
    ctx.moveTo(x, y);
    ctx.lineTo(x + 2 * gridSize, y);
    ctx.lineTo(x + 2 * gridSize, y + gridSize);
    ctx.lineTo(x, y + gridSize);
    ctx.closePath();
    ctx.stroke();

    ctx.beginPath();
    ctx.moveTo(x + gridSize / 2, y + gridSize / 2);
    ctx.lineTo(x + 3 * gridSize / 2, y + gridSize / 2);
    ctx.stroke();

    ctx.beginPath();
    ctx.moveTo(x + gridSize / 2, y + gridSize / 2);
    ctx.lineTo(x + gridSize / 2, y + 3 * gridSize/2);
    ctx.stroke();
    
    ctx.beginPath();
    ctx.moveTo(x + 3 * gridSize / 2, y + gridSize / 2);
    ctx.lineTo(x + 3 * gridSize / 2, y + 3 * gridSize/2);
    ctx.stroke();
  }


  drawCamp(gridSize, gridSize); // 左上行营
  drawCamp(boardWidth - 3 * gridSize, gridSize); // 右上行营
  drawCamp(gridSize, boardHeight - 2 * gridSize); // 左下行营
  drawCamp(boardWidth - 3 * gridSize, boardHeight - 2 * gridSize); // 右下行营

  // 绘制大本营
  function drawBaseCamp(x,y){
     ctx.fillRect(x, y, gridSize*2, gridSize*3);
  }
  ctx.fillStyle = "grey";
  drawBaseCamp(gridSize*4,0);
  drawBaseCamp(gridSize*4,boardHeight - gridSize*3);

  // 绘制铁路
  ctx.strokeStyle = 'blue';
  ctx.lineWidth = 3;

  function drawRail(x,y,isVertical){
    if(isVertical){
        ctx.beginPath();
        ctx.moveTo(x,y);
        ctx.lineTo(x, y+gridSize*2);
        ctx.stroke();
    }else{
        ctx.beginPath();
        ctx.moveTo(x,y);
        ctx.lineTo(x+gridSize*2, y);
        ctx.stroke();
    }
  }

  drawRail(gridSize,gridSize*2,true);
  drawRail(gridSize*2,gridSize*3,false);
  drawRail(gridSize*3,gridSize*2,true);

  drawRail(boardWidth-gridSize,gridSize*2,true);
  drawRail(boardWidth-gridSize*3,gridSize*3,false);
  drawRail(boardWidth-gridSize*2,gridSize*2,true);
posted @ 2024-12-14 06:04  王铁柱6  阅读(36)  评论(0)    收藏  举报