这两天刚学了canvas和svg就想做一个五子棋

个人喜欢svg就是用svg吧

svg元素

矩形

• <rect>

  x 绘制的x轴坐标 y 绘制的y轴坐标 width 矩形宽度 height 矩形高度 rx 设置圆角矩形的x轴方向的半径 ry 设置圆角矩形的y轴方向的半径

• 样式设置

fill:transparent 填充 stroke:描边 stroke-width 边框宽度 fill-opacity ：0-1

圆形

• <circle>

cx,cy:圆心 r：半径

• <ellipse>

cx,cy:圆心 rx：x轴方向的半径 ry：y轴方向的半径

线条

• <line>

x1 y1 起始点坐标 x2 y2 结束点坐标 stroke-dashArray

• <polyline>

points:表示绘制折线的所有坐标点 自动填充绘制的区域 但是不会自动闭合

• <polygon>

points:表示绘制多边形的所有坐标点 自动填充绘制的区域 但是会自动闭合

绘制文本

• <text>

x y 绘制坐标 font-size:设置文字字体大小 alignment-baseline 调整文本的基线

绘制图像

-<image>

x y XLink:href="url" width height

路径

• <path>

 css样式：

• <style>
          svg {
              border: rgb(17, 111, 219) solid 1px;
              width: 700px;
              height: 700px;
              position: absolute;
              top: 0;
              left: 0;
              right: 0;
              bottom: 0;
              margin: auto;
              background-color: rgb(206, 167, 96);
          }
  
          line {
              stroke-width: 2px;
              stroke: black;
          }
  
          circle {
              opacity: 0;
              /* fill-opacity: 0; */
          }
  </style>

  js部分：

  var svg = document.getElementsByTagName('svg')[0];
          var n = 70
          for (var i = 0; i < 15; i++) {
              var line = document.createElementNS('http://www.w3.org/2000/svg', 'line');
              line.setAttribute('fill', 'black')
              line.setAttribute('x1', n)
              line.setAttribute('y1', 70)
              line.setAttribute('x2', n)
              line.setAttribute('y2', 630)
              n += 40
              svg.appendChild(line)
              if (n == 670) {
                  break
              }
              // svg.appendChild(line)
          }
          var m = 70;
          for (var i = 0; i < 15; i++) {
              var line = document.createElementNS('http://www.w3.org/2000/svg', 'line');
              line.setAttribute('fill', 'black')
              line.setAttribute('x1', 70)
              line.setAttribute('y1', m)
              line.setAttribute('x2', 630)
              line.setAttribute('y2', m)
              m += 40
              svg.appendChild(line)
              if (m == 670) {
                  break
              }
              // svg.appendChild(line)
          }
  
          for (var j = 0; j < 15; j++) {
              var n = 70
              for (var i = 0; i < 15; i++) {
                  var circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
                  circle.a = 0
                  circle.setAttribute('fill', 'red')
                  circle.setAttribute('cx', n)
                  circle.setAttribute('cy', 70 + 40 * j)
                  circle.setAttribute('r', 15)
                  n += 40
                  svg.appendChild(circle)
                  if (n == 670) {
                      break
                  }
              }
          }

 js部分

通过svg划线算好距离就可以因为要画不少所以用循环实现

var svg = document.getElementsByTagName('svg')[0];
        var n = 70
        for (var i = 0; i < 15; i++) {
            var line = document.createElementNS('http://www.w3.org/2000/svg', 'line');
            line.setAttribute('fill', 'black')
            line.setAttribute('x1', n)
            line.setAttribute('y1', 70)
            line.setAttribute('x2', n)
            line.setAttribute('y2', 630)
            n += 40
            svg.appendChild(line)
            if (n == 670) {
                break
            }
            // svg.appendChild(line)
        }
        var m = 70;
        for (var i = 0; i < 15; i++) {
            var line = document.createElementNS('http://www.w3.org/2000/svg', 'line');
            line.setAttribute('fill', 'black')
            line.setAttribute('x1', 70)
            line.setAttribute('y1', m)
            line.setAttribute('x2', 630)
            line.setAttribute('y2', m)
            m += 40
            svg.appendChild(line)
            if (m == 670) {
                break
            }
            // svg.appendChild(line)
        }

        for (var j = 0; j < 15; j++) {
            var n = 70
            for (var i = 0; i < 15; i++) {
                var circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
                circle.a = 0
                circle.setAttribute('fill', 'red')
                circle.setAttribute('cx', n)
                circle.setAttribute('cy', 70 + 40 * j)
                circle.setAttribute('r', 15)
                n += 40
                svg.appendChild(circle)
                if (n == 670) {
                    break
                }
            }
        }

 效果如下

 我的想法是将妻子下在交点上（也可以在格子内）

以交点为圆心画圆然后将其隐藏代码如下：

var flag = true;
        var flaga = false;
        var cir = document.getElementsByTagName('circle');
        for (var i = 0; i < cir.length; i++) {
            (function (i) {
                cir[i].onclick = function (e) {
                    if (e.target.style.opacity != '1') {
                        e.target.style.opacity = '1'
                        if (flag) {
                            e.target.setAttribute('fill', 'black')
                            e.target.a = '黑棋'
                        } else {
                            e.target.setAttribute('fill', 'white')
                            e.target.a = '白棋'
                        }
                        flag = !flag
                    }
                }
            }
            (i))
        }

 这样一个五子棋模型就完成了