<p>
<canvas id="ejsoon3a" width="130" height="130"></canvas>
<script type="text/javascript">
function draw(){
var canvas = document.getElementById('ejsoon3a');
if(!canvas.getContext) return;
var ctx = canvas.getContext("2d");
//绘制网格点阵
for (var x =0; x <7; x++) {
for (var y =0; y <7; y++) {
ctx.lineWidth = 0.5;
ctx.beginPath();
// 绘制水平线段
let t=20;
ctx.moveTo(3+x * t , 5+y *t);
ctx.lineTo(7+x * t, 5+y *t);
// 绘制垂直线段
ctx.moveTo(5+x * t, y * t +3);
ctx.lineTo(5+x * t, y *t + 7);
ctx.strokeStyle = 'Black';
ctx.stroke();
}
}
//绘制图案
{
let s=5;//页边距
let t=20;//网格单元格大小
let r=s+6*t;//网格右边界
ctx.beginPath();
ctx.strokeStyle = 'Blue';
ctx.lineWidth = 2.5;
ctx.rect(s, s, 6*t, 6*t); //外围正方形
ctx.rect(s+2*t, s+2*t, 2*t, 2*t); //二环
//大井字形
ctx.moveTo(s, s+t);
ctx.lineTo(r, s+t);
ctx.moveTo(s, r-t);
ctx.lineTo(r, r-t);
ctx.moveTo(s+t, s);
ctx.lineTo(s+t, r);
ctx.moveTo(r-t, s);
ctx.lineTo(r-t, r);
//大十字
ctx.moveTo(s, s+3*t);
ctx.lineTo(r, s+3*t);
ctx.moveTo(s+3*t, s);
ctx.lineTo(s+3*t, r);
//中心斜方
ctx.moveTo(s+3*t, s+2*t);
ctx.lineTo(s+2*t, s+3*t);
ctx.lineTo(s+3*t, s+4*t);
ctx.lineTo(s+4*t, s+3*t);
ctx.lineTo(s+3*t, s+2*t);
//四条单独斜线
ctx.moveTo(s, s+2*t);
ctx.lineTo(s+2*t, s);
ctx.moveTo(s+4*t, s);
ctx.lineTo(r, s+2*t)
ctx.moveTo(r, s+4*t);
ctx.lineTo(s+4*t, r);
ctx.moveTo(s+2*t, r);
ctx.lineTo(s, s+4*t);
ctx.stroke();
}
}
draw();
</script>
</p> gxqcn 发表于 2024-7-14 23:52
楼主提到的“整线段”、“碎线段”很形象，继续沿用之。
新增要求：所有碎线段端点的坐标必须为整数，即均 ...
漂亮！這個可以用作公司logo。
不知電腦能否窮舉所有的 7 x 7 格點的結果？
現在如果對解法進行分類的話，可以分成三種：井字，十字，其它。
井字系的已經有4個，你這個也是井字系的。
不知電腦能否輔助發現更多十字系及其它怪異的解法？ 确实很容易数错，来看看下面这个对不对。
<p>
<canvas id="hujunhua1" width="130" height="130"></canvas>
<script type="text/javascript">
function draw(){
var canvas = document.getElementById('hujunhua1');
if(!canvas.getContext) return;
var ctx = canvas.getContext("2d");
//绘制网格点阵
for (var x =0; x <7; x++) {
for (var y =0; y <7; y++) {
ctx.lineWidth = 0.5;
ctx.beginPath();
// 绘制水平线段
let t=20;
ctx.moveTo(3+x * t , 5+y *t);
ctx.lineTo(7+x * t, 5+y *t);
// 绘制垂直线段
ctx.moveTo(5+x * t, y * t +3);
ctx.lineTo(5+x * t, y *t + 7);
ctx.strokeStyle = 'Black';
ctx.stroke();
}
}
//绘制图案
{
let s=5;//页边距
let t=20;//网格单元格大小
let r=s+6*t;//网格右边界
ctx.beginPath();
ctx.strokeStyle = 'Blue';
ctx.lineWidth = 2.5;
ctx.rect(s, s, 6*t, 6*t); //外围正方形
ctx.rect(s+t, s+t, 4*t, 4*t); //二环
//大井字形
ctx.moveTo(s, s+2*t);
ctx.lineTo(r, s+2*t);
ctx.moveTo(s, r-2*t);
ctx.lineTo(r, r-2*t);
ctx.moveTo(s+2*t, s);
ctx.lineTo(s+2*t, r);
ctx.moveTo(r-2*t, s);
ctx.lineTo(r-2*t, r);
//中心斜方
ctx.moveTo(s+3*t, s);
ctx.lineTo(s, s+3*t);
ctx.lineTo(s+3*t, r);
ctx.lineTo(r, s+3*t);
ctx.lineTo(s+3*t, s);
ctx.stroke();
}
}
draw();
</script>
</p>
线段16条，6X6网格（7X7点阵）。
五個斜方形的類別，暫時只構造出一個。線段復用率有點低，就當拋磚引玉。
其构造思路为：
直接同心嵌套三层“田”字格，即可获得15个正方形，
等腰直角三角形必须依赖斜线段，设法让其同时贡献1个正方形，
还欠8个正方形，从外圈中构造，可避免产生新的正方形或等腰直角三角形，
大功告成！简单粗暴。
此图，除了点阵大小外，
整线段数和交点数两项指标，均不占优，
甚至将其最小可覆盖格点阵列上的所有格点全部遍历，
这未免不失为其创造的一项独特记录。
本圖詮釋了一切都可以用暴力解決。
构造上传于 2024-07-15 21:27 改造上传于 2024-07-16 08:05
此两图均有个大“回”字，
其中左图还是给空心的，四角各挂一个“田”字，但经楼主复核，遗憾发现正方形数目不对；
右图是其改造版，将原四角“田”字拆掉，改放置于中心，不过，自己发现等腰直角三角形有漏数。
這是我對於上圖調整的結果。
直接用手機製作svg圖
不必打開電腦也能畫，直接用手機編輯svg：</p><head>
<style>
.post-content {
white-space: pre-wrap
}
</style>
</head>
<body>
<div class="post-content">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg" width="480" height="480" viewBox="0 0 480 480">
<path fill="none" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" stroke="#436" d="
M 24 24 h 432 v 432 h -432 Z
M 240 24 v 432
M 24 240 h 432
M 96 96 h 288 v 288 h -288 Z
M 168 24 v 72
M 312 24 v 72
M 24 168 h 72
M 24 312 h 72
M 168 456 v -72
M 312 456 v -72
M 456 168 h -72
M 456 312 h -72
M 240 96 l 144 144 l -144 144 l -144 -144 Z
M 168 168 h 144 v 144 h -144 Z
"/>
</svg>
M表示起始坐標，h横走，v豎走，l斜走 Z收尾。
選擇432作為寬度是因為它是8,16,12,6,的倍數，適合置於480內。
android手機瀏覽器察看本地文件：
file:///sdcard/Download/242494.svg
file:///storage/emulated/0/Download/242494.svg
之後到「https://ejsoon.win/apng」把svg轉成png。
這是我的作圖方法，僅供參考。以下是网页显示的矢量图效果，需要在附加选项中能勾选Html代码。（管理员编辑时帮我勾上的）
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg" width="480" height="480" viewBox="0 0 480 480">
<path fill="none" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" stroke="#436" d="
M 24 24 h 432 v 432 h -432 Z
M 240 24 v 432
M 24 240 h 432
M 96 96 h 288 v 288 h -288 Z
M 168 24 v 72
M 312 24 v 72
M 24 168 h 72
M 24 312 h 72
M 168 456 v -72
M 312 456 v -72
M 456 168 h -72
M 456 312 h -72
M 240 96 l 144 144 l -144 144 l -144 -144 Z
M 168 168 h 144 v 144 h -144 Z
"/>
</svg>
</p>
</div>
</body>
大紅心。整線段亦為24條。