使用canvas 绘制象棋棋盘

最新推荐文章于 2024-05-20 17:25:10 发布
最新推荐文章于 2024-05-20 17:25:10 发布
阅读量736 收藏 3
点赞数 2
分类专栏： js 文章标签： canvas
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yjITcsdn/article/details/116206815
版权

先看效果图吧
O(∩_∩)O哈哈~
在这里插入图片描述

代码在这里

<!dOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>绘制象棋</title>
		<style>
			body {
				background-color: #C5C5C5;
			}
			canvas {
				position: fixed;
				background-color: #FFFFFF;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
			}
		</style>
	</head>
	<body>
		<canvas id="canvas" width="580" height="630"></canvas>
		<script>
			let canvas = document.getElementById('canvas')
			let cxt = canvas.getContext('2d')
			drawBorder()
			drawBorder2()
			drawBorder3()
			drawBorder4()
			drawBorder5()
			drawFont()

			function drawFont() {
				cxt.font = '40px Verdana'
				cxt.fillText('楚河', 70, 330)
				cxt.translate(510, 300) //重新映射画布上的（x,y）位置
				cxt.rotate(180 * Math.PI / 180) // 旋转当前绘图:旋转 180 度，可规定下面的公式：180*Math.PI/180
				cxt.fillText('漢界', 0, 0)
			}
			// 外边框大
			function drawBorder() {
				cxt.beginPath()
				// 方法1
				// 上边线
				// cxt.moveTo(10,10)
				// cxt.lineTo(570,10)				
				// // 下边线
				// cxt.moveTo(10,620)
				// cxt.lineTo(570,620) 
				// // 左边线
				// cxt.moveTo(10,8)
				// cxt.lineTo(10,622) 
				// // 右边线
				// cxt.moveTo(570,8)
				// cxt.lineTo(570,622)
				//  方法2
				cxt.moveTo(10, 10)
				cxt.lineTo(570, 10)
				cxt.lineTo(570, 620)
				cxt.lineTo(10, 622)
				cxt.lineTo(10, 8)

				cxt.lineWidth = 4;
				cxt.stroke()
				cxt.closePath()
			}
			// 边框2
			function drawBorder2() {
				cxt.beginPath()
				for (let i = 0; i <= 10; i++) {
					// 棋盘横向边线
					cxt.moveTo(15, 66.5 * i + 15)
					cxt.lineTo(564, 66.5 * i + 15)
				}
				// 左边线
				cxt.moveTo(16, 16)
				cxt.lineTo(16, 614)
				// 右边线
				cxt.moveTo(564, 14)
				cxt.lineTo(564, 614)

				cxt.lineWidth = 2

				cxt.stroke()
				cxt.closePath()
			}
			// 绘制上下的X
			function drawBorder3() {
				cxt.beginPath()
				for (let s = 1; s <= 7; s++) {
					// 棋盘上半边纵向线
					cxt.moveTo(70 * s + 16, 16)
					cxt.lineTo(70 * s + 16, 280)
					// 棋盘下半边纵向线
					cxt.moveTo(70 * s + 16, 348)
					cxt.lineTo(70 * s + 16, 614)
				}

				// 上半部分棋盘斜线
				cxt.moveTo(225, 150)
				cxt.lineTo(365, 16)
				cxt.moveTo(368, 150)
				cxt.lineTo(226, 16)

				// 下半部分棋盘斜线
				cxt.moveTo(366, 612)
				cxt.lineTo(226, 481)
				cxt.moveTo(228, 612)
				cxt.lineTo(366, 481)

				cxt.lineWidth = 2
				cxt.stroke()
				cxt.closePath()
			}
			// 上半部分
			function drawBorder4() {
				cxt.beginPath()
				// line 1-1
				cxt.moveTo(72, 144)
				cxt.lineTo(82, 144)
				cxt.lineTo(82, 134)
				// line 1-2
				cxt.moveTo(100, 144)
				cxt.lineTo(90, 144)
				cxt.lineTo(90, 134)
				// line 1-3
				cxt.moveTo(492, 144)
				cxt.lineTo(502, 144)
				cxt.lineTo(502, 134)
				// line 1-4
				cxt.moveTo(519, 144)
				cxt.lineTo(510, 144)
				cxt.lineTo(510, 134)
				// line 2-1
				cxt.moveTo(72, 152)
				cxt.lineTo(82, 152)
				cxt.lineTo(82, 160)
				// line 2-2
				cxt.moveTo(99, 152)
				cxt.lineTo(90, 152)
				cxt.lineTo(90, 160)
				// line 2-3
				cxt.moveTo(492, 152)
				cxt.lineTo(502, 152)
				cxt.lineTo(502, 160)
				// line 2-4
				cxt.moveTo(519, 152)
				cxt.lineTo(510, 152)
				cxt.lineTo(510, 160)
				// line 3-1
				cxt.moveTo(30, 210)
				cxt.lineTo(20, 210)
				cxt.lineTo(20, 200)
				// line 3-2
				cxt.moveTo(142, 210)
				cxt.lineTo(152, 210)
				cxt.lineTo(152, 200)
				// line 3-3
				cxt.moveTo(170, 210)
				cxt.lineTo(160, 210)
				cxt.lineTo(160, 200)
				// line 3-4
				cxt.moveTo(282, 210)
				cxt.lineTo(292, 210)
				cxt.lineTo(292, 200)
				// line 3-5
				cxt.moveTo(310, 210)
				cxt.lineTo(300, 210)
				cxt.lineTo(300, 200)
				// line 3-6
				cxt.moveTo(422, 210)
				cxt.lineTo(432, 210)
				cxt.lineTo(432, 200)
				// line 3-7
				cxt.moveTo(450, 210)
				cxt.lineTo(440, 210)
				cxt.lineTo(440, 200)
				// line 3-8
				cxt.moveTo(550, 210)
				cxt.lineTo(560, 210)
				cxt.lineTo(560, 200)
				// line 4-1 
				cxt.moveTo(30, 220)
				cxt.lineTo(20, 220)
				cxt.lineTo(20, 230)
				// line 4-2
				cxt.moveTo(142, 220)
				cxt.lineTo(152, 220)
				cxt.lineTo(152, 230)
				// line 4-3
				cxt.moveTo(170, 220)
				cxt.lineTo(160, 220)
				cxt.lineTo(160, 230)
				// line 4-4
				cxt.moveTo(282, 220)
				cxt.lineTo(292, 220)
				cxt.lineTo(292, 230)
				// line 4-5
				cxt.moveTo(310, 220)
				cxt.lineTo(300, 220)
				cxt.lineTo(300, 230)
				// line 4-6
				cxt.moveTo(422, 220)
				cxt.lineTo(432, 220)
				cxt.lineTo(432, 230)
				// line 4-7
				cxt.moveTo(450, 220)
				cxt.lineTo(440, 220)
				cxt.lineTo(440, 230)
				// line 4-8
				cxt.moveTo(550, 220)
				cxt.lineTo(560, 220)
				cxt.lineTo(560, 230)

				cxt.lineWidth = 2
				cxt.stroke()
				cxt.closePath()
			}

			function drawBorder5() {
				cxt.beginPath()
				// line 5-1
				cxt.moveTo(30, 410)
				cxt.lineTo(20, 410)
				cxt.lineTo(20, 400)
				// line 5-2
				cxt.moveTo(142, 410)
				cxt.lineTo(152, 410)
				cxt.lineTo(152, 400)
				// line 5-3
				cxt.moveTo(170, 410)
				cxt.lineTo(160, 410)
				cxt.lineTo(160, 400)
				// line 5-4 
				cxt.moveTo(282, 410)
				cxt.lineTo(292, 410)
				cxt.lineTo(292, 400)
				// line 5-5
				cxt.moveTo(310, 410)
				cxt.lineTo(300, 410)
				cxt.lineTo(300, 400)
				// line 5-6
				cxt.moveTo(422, 410)
				cxt.lineTo(432, 410)
				cxt.lineTo(432, 400)
				// line 5-7
				cxt.moveTo(450, 410)
				cxt.lineTo(440, 410)
				cxt.lineTo(440, 400)
				// line 5-8
				cxt.moveTo(550, 410)
				cxt.lineTo(560, 410)
				cxt.lineTo(560, 400)

				// line 6-1
				cxt.moveTo(30, 418)
				cxt.lineTo(20, 418)
				cxt.lineTo(20, 428)
				// line 6-2
				cxt.moveTo(142, 418)
				cxt.lineTo(152, 418)
				cxt.lineTo(152, 428)
				// line 6-3
				cxt.moveTo(170, 418)
				cxt.lineTo(160, 418)
				cxt.lineTo(160, 428)
				// line 6-4
				cxt.moveTo(282, 418)
				cxt.lineTo(292, 418)
				cxt.lineTo(292, 428)
				// line 6-5
				cxt.moveTo(310, 418)
				cxt.lineTo(300, 418)
				cxt.lineTo(300, 428)
				// line 6-6
				cxt.moveTo(422, 418)
				cxt.lineTo(432, 418)
				cxt.lineTo(432, 428)
				// line 6-7
				cxt.moveTo(450, 418)
				cxt.lineTo(440, 418)
				cxt.lineTo(440, 428)
				// line 6-8
				cxt.moveTo(550, 418)
				cxt.lineTo(560, 418)
				cxt.lineTo(560, 428)

				// line 7-1
				cxt.moveTo(72, 476)
				cxt.lineTo(82, 476)
				cxt.lineTo(82, 466)
				//line 7-2
				cxt.moveTo(100, 476)
				cxt.lineTo(90, 476)
				cxt.lineTo(90, 466)
				//line 7-4
				cxt.moveTo(520, 476)
				cxt.lineTo(510, 476)
				cxt.lineTo(510, 466)
				// line 7-4 
				cxt.moveTo(492, 476)
				cxt.lineTo(502, 476)
				cxt.lineTo(502, 466)

				//line 8-1
				cxt.moveTo(100, 484)
				cxt.lineTo(90, 484)
				cxt.lineTo(90, 494)
				// line 8-2
				cxt.moveTo(72, 484)
				cxt.lineTo(82, 484)
				cxt.lineTo(82, 494)
				// line 8-3
				cxt.moveTo(492, 484)
				cxt.lineTo(502, 484)
				cxt.lineTo(502, 494)
				// line8-4
				cxt.moveTo(520, 484)
				cxt.lineTo(510, 484)
				cxt.lineTo(510, 494)

				cxt.lineWidth = 2
				cxt.stroke()
				cxt.closePath()
			}
		</script>
	</body>
</html>
yj小耳朵
关注
  • 2
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
canvas绘制中国象棋
PPaio的博客
08-27 464
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".
canvas绘制象棋(canvas绘图)
02-25
刚刚学习了canvas,做了一个简单的示例，希望能巩固一下自己所学的知识，从上面的代码可以看出存在很多不足的地方，比如:代码冗余,绘制棋盘的方法也不是很好，虽然功能是实现了，但作为一名写程序的程序员我们要追求...
canvas绘制中国象棋棋盘
冰凌的博客
02-14 901
棋盘 board.html <!doctype html> <html> <head> <meta charset="gb2312"/> </head> <body> <div class="board"> <canvas id="board" width="450px" height=...
使用canvas画象棋界面
最新发布
qq_56523345的博客
05-20 325
【代码】使用canvas画象棋界面。
canvas绘制国际棋盘
qq_24618061的博客
11-26 744
方法1，笨办法，一个一个黑白格子画，画到天亮。 方法2，for循环，一步到位。 完整代码如下： <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> canvas{ background:#f2f2f2; } </style> <s
html画布创建黑白象棋棋盘,Canvas绘制象棋棋盘
weixin_39740272的博客
06-15 449
学习Canvas可以通过一些例子来增加成就感一下是一个输出一个象棋棋盘的例子象棋棋盘//以要画的点为原点定义四个象限var pointDefine=[[-1,-1],[1,-1],[-1,1],[1,1]];//要绘制标记方位 全部var allP =[0,1,2,3];//要绘制标记方位 左侧var leftP =[1,3];//要绘制标记方位 右侧var rightP =[0,2];var c...
使用tkinter canvas绘制中国象棋棋盘
flysh05的专栏
03-16 579
使用canvas 绘制中国象棋棋谱，测试代码如下：from tkinterimport *window = Tk()window.title("中国象棋棋盘")canv = Canvas(window, width=400, height=450)canv.create_line((0, 2), (400, 2), width=2)for i in range(10):    canv.create_line((0, i *50), (400, i *50), wid
html画布创建黑白象棋棋盘,canvas应用——中国象棋棋盘
weixin_29775447的博客
06-15 563
CANVAS应用-中国象棋body{margin: 0;padding: 0;}#div1{width:620px;height:620px;margin: 0 auto;margin-top: 50px;border: 2px solid #f00;}#div2{width:605px;height:120px;margin:0 auto;margin-top:10px;border: 2px ...
【canvas画棋盘精简版】
trytryba的博客
06-28 360
程序中需要用一个中国象棋的棋盘，直接放图片，大小有１０多Ｋ，再压缩就不清楚了，想到用canvas画一个，网上找了几个，写的有些繁琐，自己改了一个。只有几十行代码。需要的拿去参考。
OpenHarmony分布式五子棋-使用Canvas组件 实现棋盘、棋子的绘制
2401_82546228的博客
04-01 1120
五子棋是一款比较流行的棋类游戏，此游戏使用分布式数据管理功能开发完成的。
html画布创建黑白象棋棋盘,HTML5学习与加固——canvas绘图象棋盘
weixin_31451231的博客
06-15 559
1 2 34 5 6 canvas绘图_象棋盘7 89 10 不支持Canvas11 12 13 14 15 16 17 1819 20 21 22 2...
canvas绘制中国象棋棋盘代码最简
06-28
程序中需要用一个中国象棋的棋盘，直接放图片，大小有１０多Ｋ，再压缩就不清楚了，想到用canvas画一个，网上找了几个，写的有些繁琐，自己改了一个。只有几十行代码。需要的拿去参考。
canvas完美绘制中国象棋棋盘
11-20
中国象棋棋盘由9行10列的交叉点组成，所以我们需要一个循环来绘制这些交叉点。Canvas API提供了`beginPath()`、`moveTo()`、`lineTo()`和`stroke()`等方法来绘制路径。以下代码演示了如何绘制棋盘的线条： ```...
guojixiangqi.rar_象棋棋盘
09-23
【标题】"guojixiangqi.rar_象棋棋盘" 涉及的主要知识点是设计和实现一个国际象棋棋盘的界面。这通常在编程教育中作为基础图形用户界面（GUI）或者游戏开发的一个练习项目。在这个任务中，我们需要创建一个8x8的网格...
vue 判断多个input 是否为空
yjITcsdn的博客
05-18 9388
vue 判断页面所有input的值不等于空，提交的时候并给出提示， 1.html <input placeholder="必填" alt="开户支行" v-model="bank_branch" :value='bank_branch' /> 2.js //获取页面所有的input var els = document.getElementsByTagName("input"...
用fingerprintjs2.js 生成浏览器标识
yjITcsdn的博客
01-28 3703
fingerprintjs2.js是一个生成浏览器指纹标识的库。 可以预先新建一个文件，将获取标识的方法写成公共的，方便在任何地方调用。 新建名为myFingerprintjs2的js，js中引入fingerprintjs2.js import Fingerprint2 from 'fingerprintjs2' 开始封装公共方法 export function requestIdleCallback2() { return new Promise((resolve) => {
vue上传音视频文件并获取时长
yjITcsdn的博客
01-28 2190
音视频文件获取时长
iframe里弹出的层显示在整个网页上
yjITcsdn的博客
04-03 1958
1.在子页面中做好弹窗布局以及css，备用 .showPopup{ position: fixed;top: 0;background-color:rgba(0,0,0,0.3) ;width: 100%;height: 100%; } .showPopup>.Popupcotent{ position: fixed; top: 47%;width:500px;left:20%;he...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值