田字描红贴

海天鹰

已于 2023-10-19 11:13:40 修改

阅读量135

点赞数

分类专栏： JS 文章标签： javascript html

于 2023-10-17 00:31:07 首次发布

本文链接：https://blog.csdn.net/sonichty/article/details/133874613

版权

JS 专栏收录该内容

58 篇文章 1 订阅

订阅专栏

图片保存打印即可。

新增文字切换。

<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>