如何克隆/概括画布绘图答案

【问题标题】：How to clone/generalize a canvas drawing如何克隆/概括画布绘图
【发布时间】：2017-08-19 02:54:53
【问题描述】：

我正在做一个 JavaScript 游戏任务，只是尝试玩一下画布。我的任务是使用激光源、镜子和目标对象进行激光游戏。

我刚刚做了一个丑陋的硬编码示例：

'use strict';

function $(id) {
    return document.getElementById(id);
}

function draw() {
    let canvas = $('canvas');
    if(canvas.getContext) {
        let ctx = canvas.getContext("2d");
        ctx.lineWidth = 5;
        ctx.strokeStyle = 'hsla(265, 18%, 26%, 0,80)';

        ctx.beginPath();
        ctx.moveTo(10,10);
        ctx.lineTo(10,60);
        ctx.moveTo(10,65);
        ctx.lineTo(10,115);
        ctx.moveTo(10,115);
        ctx.lineTo(60,115);
        ctx.moveTo(65,115);
        ctx.lineTo(115,115);
        ctx.moveTo(115,115);
        ctx.lineTo(115,65);
        ctx.moveTo(115,60);
        ctx.lineTo(115,10);
        ctx.moveTo(115,10);
        ctx.lineTo(65,10);
        ctx.moveTo(60,10);
        ctx.lineTo(10,10);          
        ctx.stroke();
    }
}

draw();

https://jsfiddle.net/h9664oz4/

我的问题是：你会建议什么解决方案，所以我可以用这样的矩形制作一个 N*N 表（我需要间隙，所以激光会穿过它们）。

我需要将元素放在矩形内，但我希望激光路径的每一侧都有 2 个间隙，而不是在中间。这只是为了澄清。

明确地说，我不想要现成的解决方案，我想学习。只需要一些指导，继续前进。您会建议改用 SVG 吗？这些 2D 游戏有一些 JS 模式约定吗？你会推荐使用类来实现更简洁的代码架构吗？

我是所有这些的新手。

【问题讨论】：

好吧，我明白了，我一个人在这里会有点精神分裂症。无论如何都会在这里记录我的进步。我的计划是制作一个容器 html 模式，并为它们制作生成器功能。

标签： javascript canvas svg drawing 2d-games

【解决方案1】：

下面是一个使用“矩形”的 SVG 示例，它是一个 SVG 路径元素。创建要克隆的路径并将其放置在 SVG defs 元素中。

<!DOCTYPE HTML>
<html>
<head>
  <title>Cloned Paths</title>
</head>

<body onload=clonePaths()>
<div id="svgDiv" style='background-color:lightgreen;width:400px;height:400px;'>
<svg id="mySVG" width="400" height="400">
<defs id=myDefs />
</svg>
</div>
<script>
 var NS="http://www.w3.org/2000/svg"
//---onload---
function clonePaths()
{
    //---create path for cloning---
    var myPath=document.createElementNS(NS,"path")
    myPath.id="pathClone"
    myPath.setAttribute("stroke-width",2)
    myPath.setAttribute("stroke","black")
    myPath.setAttribute("fill","none")
    var d="M10,10 L10,60 M10,65 L10,115 M10,115 L60,115 M65,115 L115,115 M115,115 L115,65 M115,60 L115,10 M115,10 L65,10 M60,10 L10,10"
    myPath.setAttribute("d",d)
    myDefs.appendChild(myPath)

    //---add clones---
    var pathClone=document.getElementById("pathClone")

    var path1=pathClone.cloneNode(true)
    path1.setAttribute("transform","translate(40,40)")
    mySVG.appendChild(path1)

    var path2=pathClone.cloneNode(true)
    path2.setAttribute("transform","translate(40,160)")
    mySVG.appendChild(path2)

    var path3=pathClone.cloneNode(true)
    path3.setAttribute("transform","translate(40,280)")
    mySVG.appendChild(path3)

}
</script>
</body>

</html>

【讨论】：

谢谢提示，先生。我将尝试使其更适用于任何参数，并与它们一起制作表格。