canvas绘制国际棋盘

最新推荐文章于 2024-04-01 17:46:50 发布

qq_24618061

最新推荐文章于 2024-04-01 17:46:50 发布

阅读量722

点赞数

分类专栏： web前端文章标签： javascript 开发语言 canvas web

本文链接：https://blog.csdn.net/qq_24618061/article/details/121567151

版权

web前端专栏收录该内容

14 篇文章 0 订阅

订阅专栏

方法1，笨办法，一个一个黑白格子画，画到天亮。

方法2，for循环，一步到位。

完整代码如下：

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
		canvas{
			background:#f2f2f2;
		}
	</style>
  <script></script>
 </head>
 <body>
	<canvas width="400" height="400" id="canvas">您的浏览器不支持canvas标签</canvas> 
	<br>
	<canvas width="400" height="400" id="canvas2"></canvas>
	<script>
		var ctx=canvas.getContext('2d');
		ctx.fillRect(0,0,50,50);
		ctx.fillRect(100,0,50,50);
		ctx.fillRect(200,0,50,50);
		ctx.fillRect(300,0,50,50);
		ctx.fillRect(50,50,50,50);
		ctx.fillRect(150,50,50,50);
		ctx.fillRect(250,50,50,50);
		ctx.fillRect(350,50,50,50);
		ctx.fillRect(0,100,50,50);
		ctx.fillRect(100,100,50,50);
		ctx.fillRect(200,100,50,50);
		ctx.fillRect(300,100,50,50);
		ctx.fillRect(50,150,50,50);
		ctx.fillRect(150,150,50,50);
		ctx.fillRect(250,150,50,50);
		ctx.fillRect(350,150,50,50);
		ctx.fillRect(0,200,50,50);
		ctx.fillRect(100,200,50,50);
		ctx.fillRect(200,200,50,50);
		ctx.fillRect(300,200,50,50);
		ctx.fillRect(50,250,50,50);
		ctx.fillRect(150,250,50,50);
		ctx.fillRect(250,250,50,50);
		ctx.fillRect(350,250,50,50);
		ctx.fillRect(0,300,50,50);
		ctx.fillRect(100,300,50,50);
		ctx.fillRect(200,300,50,50);
		ctx.fillRect(300,300,50,50);
		ctx.fillRect(50,350,50,50);
		ctx.fillRect(150,350,50,50);
		ctx.fillRect(250,350,50,50);
		ctx.fillRect(350,350,50,50);

		var ctx2=canvas2.getContext('2d');
		var x=0;
		var y=0;
		var w=50;
		var h=50;
		for(var i=0;i<8;i++){
			y=i*100;
			for(var j=0;j<4;j++){
				x=j*100;
				ctx2.fillRect(x,y,w,h);
			}
		}
		for(var i=0;i<8;i++){
			y=i*100+50;
			for(var j=0;j<4;j++){
				x=j*100+50;
				ctx2.fillRect(x,y,w,h);
			}
		}

	</script>
 </body>
</html>

qq_24618061

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
canvas绘制国际棋盘

方法1，笨办法，一个一个黑白格子画，画到天亮。方法2，for循环，一步到位。完整代码如下：<!doctype html><html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> canvas{ background:#f2f2f2; } </style> <s
复制链接

扫一扫