田字描红贴


<html>
<title>田字描红贴</title>
<head>
<style>
canvas { border:1px solid gray; }
</style>
</head>
<body>
<select id="select" onchange="draw()">
<option>黄鹤楼送孟浩然之广陵</option>
<option>送元二使安西</option>
<option>咏柳</option>
<option>望庐山瀑布</option>
<option>清明</option>
<option>静夜思</option>
<option>早发白帝城</option>
</select>
<div align="center"><canvas id="canvas"></canvas></div>
<script>
var select = document.getElementById('select');
var canvas = document.getElementById('canvas');
canvas.width = 1000;
canvas.height = canvas.width * 1.414;
var ctx = canvas.getContext('2d');
ctx.font = '80px 楷体';
 
var s = new Array();
s.push('黄鹤楼送孟浩然之广陵 唐 李白 故人西辞黄鹤楼，烟花三月下扬州。孤帆远影碧空尽，唯见长江天际流。');
s.push('送元二使安西 王维 唐 渭城朝雨浥轻尘，客舍青青柳色新。劝君更尽一杯酒，西出阳关无故人。');
s.push('咏柳 贺知章 唐 碧玉妆成一树高，万条垂下绿丝绦。不知细叶谁裁出，二月春风似剪刀。');
s.push('望庐山瀑布 唐 李白 日照香炉生紫烟，遥看瀑布挂前川。飞流直下三千尺，疑是银河落九天。');
s.push('清明 杜牧 唐 清明时节雨纷纷，路上行人欲断魂。借问酒家何处有？牧童遥指杏花村。');
s.push('静夜思 李白 唐 床前明月光，疑是地上霜。举头望明月，低头思故乡。');
s.push('早发白帝城 李白 唐 朝辞白帝彩云间，千里江陵一日还。两岸猿声啼不住，轻舟已过万重山。');
 
function draw(){
	var index = select.selectedIndex;
	var sa = s[index].split('');
	var i=0;
	var w=100, h=100;
	ctx.fillStyle = "white";
	ctx.fillRect(0,0,canvas.width,canvas.height);
	for (y=80; y<canvas.height-h; y+=h*3/2) {
		for (x=80; x<canvas.width-w; x+=w*3/2) {   
			ctx.beginPath();
			ctx.strokeStyle = "black";
			ctx.setLineDash([]);
			ctx.strokeRect(x,y,w,h);
			ctx.beginPath();
			ctx.strokeStyle = "gray";
			ctx.setLineDash([5,5]);
			ctx.moveTo(x,y+h/2);
			ctx.lineTo(x+w,y+h/2);
			ctx.moveTo(x+w/2,y);
			ctx.lineTo(x+w/2,y+h);
			ctx.moveTo(x,y);
			ctx.lineTo(x+w,y+h);
			ctx.moveTo(x+w,y);
			ctx.lineTo(x,y+h);
			if (i < sa.length) {
				ctx.fillStyle = "tomato";
				ctx.fillText(sa[i],x+10,y+80);
			}
			ctx.stroke();
			i++;
		}
	}
}
 
draw();
</script>
</body>
</html>

相关阅读:
腾讯大牛手撕SpringBoot，Cloud，Nginx与Docker，你凭什么还搞不懂啊！
WordPress关联S3后图片未指定alt属性无法上传
SQL必需掌握的100个重要知识点：使用函数处理数据
将语雀文档迁移到飞书
小节2：Python数学运算
全国计算机三级嵌入式 - 题库 - 真题(含答案) - 未来教育 - 视频讲解 - 资料获取
我用electron开发了个一键批量查询核酸的桌面应用，为防疫工作贡献自己的一份力
借助Spire.Doc for Java控件，将 ODT 转换为 PDF。
C语言中什么是算术运算？什么是关系运算？什么是逻辑运算？什么是二进制运算？
yolov5加入分割头，多任务头

原文地址：https://blog.csdn.net/sonichty/article/details/133874613