canvas绘制中国象棋

ByteBomb

已于 2022-02-23 19:20:34 修改

阅读量504

点赞数

文章标签： html5 javascript canvas

于 2021-08-27 03:31:14 首次发布

本文链接：https://blog.csdn.net/PPaio/article/details/119943995

版权

这篇博客详细介绍了如何利用HTML5的Canvas API，结合JavaScript编程，绘制出一个精美的中国象棋棋盘。内容涵盖Canvas的基本绘图操作，颜色填充，以及棋子图形的绘制方法。

摘要由CSDN通过智能技术生成

在这里插入图片描述

const draw = (id) => {
      let pieces = [
        //黑
        { x: 0, y: 0, name: "車", type: "black" },
        { x: 1, y: 0, name: "馬", type: "black" },
        { x: 2, y: 0, name: "象", type: "black" },
        { x: 3, y: 0, name: "仕", type: "black" },
        { x: 8, y: 0, name: "車", type: "black" },
        { x: 7, y: 0, name: "馬", type: "black" },
        { x: 6, y: 0, name: "象", type: "black" },
        { x: 5, y: 0, name: "仕", type: "black" },
        { x: 4, y: 0, name: "將", type: "black" },
        { x: 1, y: 2, name: "炮", type: "black" },
        { x: 7, y: 2, name: "炮", type: "black" },
        { x: 0, y: 3, name: "卒", type: "black" },
        { x: 2, y: 3, name: "卒", type: "black" },
        { x: 4, y: 3, name: "卒", type: "black" },
        { x: 6, y: 3, name: "卒", type: "black" },
        { x: 8, y: 3, name: "卒", type: "black" },
        //红
        { x: 0, y: 9, name: "車", type: "red" },
        { x: 1, y: 9, name: "馬", type: "red" },
        { x: 2, y: 9, name: "相", type: &