Canvas 矩形内斜线网格绘制

铖铖铖

已于 2023-07-26 16:20:41 修改

阅读量324

点赞数 2

分类专栏： Canvas 文章标签：前端算法 javascript canva可画

于 2023-07-26 12:06:55 首次发布

本文链接：https://blog.csdn.net/weixin_42208812/article/details/131936322

版权

Canvas 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

上为效果图👆

※ 如图，绘制网格有两种情况，分别为宽大于高，和宽小于高的两种情况

下为代码👇

this.ctx.beginPath()
this.ctx.moveTo(x1, y1)
this.ctx.lineTo(x2, y1)
this.ctx.lineTo(x2, y2)
this.ctx.lineTo(x1, y2)
this.ctx.closePath()
this.ctx.stroke()
let sWidth = 23
if (x2 - x1 < y2 - y1) {
    // 宽 < 高
    let rowNeedLength = Math.floor((x2 - x1) / sWidth)
    let colNeedLength = Math.floor((y2 - y1 - rowNeedLength * sWidth) / sWidth)
    let colExcessive = (rowNeedLength + 1) * sWidth - (x2 - x1)
    let rowExcessive = ((rowNeedLength + colNeedLength) * sWidth) - (y2 - y1)
    for (let i = 0; i < rowNeedLength; i++) {
        //  /
        this.ctx.beginPath()
        this.ctx.moveTo(x1 + (i + 1) * sWidth, y1)
        this.ctx.lineTo(x1, y1 + (i + 1) * sWidth)
        this.ctx.stroke()
        this.ctx.beginPath()
        this.ctx.moveTo(x1 + (i + 1) * sWidth + rowExcessive, y2)
        this.ctx.lineTo(x2, y1 + (colNeedLength * sWidth) + colExcessive + (i * sWidth))
        this.ctx.stroke()

        // \
        this.ctx.beginPath()
        this.ctx.moveTo(x2 - (i + 1) * sWidth, y1)
        this.ctx.lineTo(x2, y1 + (i + 1) * sWidth)
        this.ctx.stroke()
        this.ctx.beginPath()
        this.ctx.moveTo(x2 - (i + 1) * sWidth - rowExcessive, y2)
        this.ctx.lineTo(x1, y1 + (colNeedLength * sWidth) + colExcessive + (i * sWidth))
        this.ctx.stroke()
    }
    for (let i = 0; i < colNeedLength; i++) {
        //  /
        this.ctx.beginPath()
        this.ctx.moveTo(x1, y1 + (i + 1) * sWidth + (rowNeedLength * sWidth))
        this.ctx.lineTo(x2, y1 + (i) * sWidth + colExcessive)
        this.ctx.stroke()
        // \
        this.ctx.beginPath()
        this.ctx.moveTo(x2, y1 + (i + 1) * sWidth + (rowNeedLength * sWidth))
        this.ctx.lineTo(x1, y1 + (i) * sWidth + colExcessive)
        this.ctx.stroke()

    }
} else {
    //宽 > 高
    let colNeedLength = Math.floor((y2 - y1) / sWidth)
    let rowNeedLength = Math.floor((x2 - x1 - colNeedLength * sWidth) / sWidth)
    let colExcessive = (colNeedLength + 1) * sWidth - (y2 - y1)
    let rowExcessive = ((colNeedLength + rowNeedLength) * sWidth) - (x2 - x1)
    for (let i = 0; i < colNeedLength; i++) {
        // /
        this.ctx.beginPath()
        this.ctx.moveTo(x1 + (i + 1) * sWidth, y1)
        this.ctx.lineTo(x1, y1 + (i + 1) * sWidth)
        this.ctx.stroke()
        this.ctx.beginPath()
        this.ctx.moveTo(x2, y1 + (i + 1) * sWidth + rowExcessive)
        this.ctx.lineTo(x1 + (rowNeedLength * sWidth) + colExcessive + (i * sWidth), y2)
        this.ctx.stroke()
        // \
        this.ctx.beginPath()
        this.ctx.moveTo(x2 - (i + 1) * sWidth, y1)
        this.ctx.lineTo(x2, y1 + (i + 1) * sWidth)
        this.ctx.stroke()
        this.ctx.beginPath()
        this.ctx.moveTo(x1, y1 + (i + 1) * sWidth + rowExcessive)
        this.ctx.lineTo(x2 - (rowNeedLength * sWidth) - colExcessive - (i * sWidth), y2)
        this.ctx.stroke()
    }
    for (let i = 0; i < rowNeedLength; i++) {
        // /
        this.ctx.beginPath()
        this.ctx.moveTo(x1 + (i + 1) * sWidth + colNeedLength * sWidth, y1)
        this.ctx.lineTo(x1 + (i) * sWidth + colExcessive, y2)
        this.ctx.stroke()
        // \
        this.ctx.beginPath()
        this.ctx.moveTo(x2 - (i + 1) * sWidth - colNeedLength * sWidth, y1)
        this.ctx.lineTo(x2 - (i) * sWidth - colExcessive, y2)
        this.ctx.stroke()
    }
}

（※ 未封装处理，便于梳理理解）