canvas(七)绘制网格和坐标轴

1.绘制网格

• 传入dom和分割线间隔进行渲染，网格线分为水平方向和垂直方向

<script>
    //绘制网格
    function drwaGrid(dom = document.querySelector("canvas"),space = 50){
        //获取画笔
        var ctx = dom && dom.getContext("2d")
        //根据画布宽高计算分割线数量
        var row = Math.floor(dom.height/space)
        var col = Math.floor(dom.width/space)
        //设置虚线
        ctx.setLineDash([5,10])
        //绘制水平分割线
        for(var i=0;i<=row;i++){
            //开启新路径
            ctx.beginPath()
            //起点
            ctx.moveTo(0,i*space)
            //画直线
            ctx.lineTo(dom.width,i*space)
            //绘制
            ctx.stroke()
        }
        //绘制垂直分割线
        for(var i=0;i<=col;i++){
            //开启新路径
            ctx.beginPath()
            //起点
            ctx.moveTo(i*space,0)
            //画直线
            ctx.lineTo(i*space,dom.height)
            //绘制
            ctx.stroke()
        }
    }

    //获取容器
    var box = document.querySelector('canvas')
    //绘制网格
    drwaGrid(box)
</script>

2.绘制坐标轴

• 分为3个部分：坐标轴，刻度线，坐标轴箭头

<script>
    //封装绘制坐标轴的类
    class DrawAxis{
        //构造器
        constructor(dom = document.querySelector('canvas'),padding = 20){
            //初始化
            this.init(dom,padding)
            //执行绘制
            this.render()
        }

        //初始化
        init(dom,padding){
            //获取画笔
            this.ctx = dom.getContext('2d')
            //间隔
            this.padding = padding
            //坐标原点
            this.x0 = this.padding + 0.5
            this.y0 = dom.height - this.padding + 0.5
            //坐标终点
            this.x_end = dom.width - this.padding + 0.5
            this.y_end = this.padding + 0.5
            //网格宽高
            this.grid_width = dom.width - this.padding * 2
            this.grid_height = dom.height - this.padding * 2
        }

        //执行渲染
        render(){
            //绘制坐标轴
            this.DrawLine()
            //绘制刻度线
            this.DrawMark()
            //绘制箭头
            this.DrawArrow()
        }

        //绘制坐标轴
        DrawLine(){
            //设置绘制宽度
            this.ctx.lineWidth = 1

            //横坐标线
            this.ctx.beginPath()
            //起点
            this.ctx.moveTo(this.x0,this.y0)
            //终点
            this.ctx.lineTo(this.x_end,this.y0)
            //绘制
            this.ctx.stroke()

            //纵坐标线
            this.ctx.beginPath()
            this.ctx.moveTo(this.x0,this.y0)
            this.ctx.lineTo(this.x0,this.y_end)
            this.ctx.stroke()
        }
        //绘制刻度线
        DrawMark(){
            //定义刻度间隔
            var space = 50
            //刻度线高度
            var mark_width = 3
            //计算刻度线数量
            var row = Math.floor(this.grid_height / space)
            var col = Math.floor(this.grid_width / space)

            //x轴刻度线
            for(var i=0;i<col;i++){
                //新路径
                this.ctx.beginPath()
                //当前x刻度坐标
                var x = (i+1) * space + this.x0
                //起点
                this.ctx.moveTo(x,this.y0)
                //终点
                this.ctx.lineTo(x,this.y0 - mark_width)
                //绘制
                this.ctx.stroke()
            }

            //y轴刻度线
            for(var i=0;i<row;i++){
                //新路径
                this.ctx.beginPath()
                //当前y刻度坐标
                var y = this.y0 - (i+1) * space
                //起点
                this.ctx.moveTo(this.x0,y)
                //终点
                this.ctx.lineTo(this.x0 + mark_width,y)
                //绘制
                this.ctx.stroke()
            }
        }
        //绘制箭头(以坐标轴终点为起点，填充一个三角形)
        DrawArrow(){
            //设置填充颜色
            this.ctx.fillStyle = 'black'

            //横坐标轴箭头
            //开启新路径
            this.ctx.beginPath()
            //移动到x轴终点附近
            this.ctx.moveTo(this.x_end + 8,this.y0)
            //绘制三角形
            this.ctx.lineTo(this.x_end - 4,this.y0 - 3)
            this.ctx.lineTo(this.x_end - 4,this.y0 + 3)
            this.ctx.lineTo(this.x_end + 8,this.y0)
            //填充
            this.ctx.fill()

            //纵坐标轴箭头
            //开启新路径
            this.ctx.beginPath()
            //移动到y轴终点附近
            this.ctx.moveTo(this.x0,this.y_end - 8)
            //绘制三角形
            this.ctx.lineTo(this.x0 - 3,this.y_end + 4)
            this.ctx.lineTo(this.x0 + 3,this.y_end + 4)
            this.ctx.lineTo(this.x0,this.y_end - 8)
            //填充
            this.ctx.fill()
        }
    }

    //获取容器
    var box = document.querySelector('canvas')
    //绘制坐标轴
    new DrawAxis(box)
</script>

3.封装成插件

将绘制坐标轴，绘制网格，坐标转换的方法封装到插件中

使用方法，传入canvas元素和padding

class DrawCoordinateSystem{
    constructor(canvas,padding){
        this.canvas = canvas || document.querySelector("canvas")
        this.padding = padding
        this.ctx = this.canvas.getContext("2d")
        //根据padding计算原点
        this.x0 = 0+padding
        this.y0 = this.canvas.height-padding

        //定义箭头的长度和高度
        this.arrowWidth = 30
        this.arrowHeight = 5

        //定义刻度间隔
        this.space = 50
        //定义刻度长度
        this.markWidth = 5

        //绘制坐标轴
        this.drawAxis()
        //绘制网格
        this.drawDrid()
    }
    // 绘制坐标轴的方法
    drawAxis(){
        var {ctx,canvas,x0,y0,arrowWidth,arrowHeight,markWidth,space} = this
        //绘制x轴
        ctx.beginPath()
        ctx.moveTo(x0,y0)
        ctx.lineTo(canvas.width,y0)
        ctx.stroke()
        //绘制箭头
        ctx.beginPath()
        ctx.moveTo(canvas.width,y0)
        ctx.lineTo(canvas.width-arrowWidth,y0-arrowHeight)
        ctx.lineTo(canvas.width-arrowWidth,y0+arrowHeight)
        ctx.closePath()
        ctx.fill()
        //绘制x轴的刻度
        for(var x=x0+space;x<canvas.width-arrowWidth;x+=space){
            ctx.beginPath()
            ctx.moveTo(x,y0)
            ctx.lineTo(x,y0-markWidth)
            ctx.stroke()
        }

        //绘制y轴
        ctx.beginPath()
        ctx.moveTo(x0,y0)
        ctx.lineTo(x0,0)
        ctx.stroke()
        //绘制箭头
        ctx.beginPath()
        ctx.moveTo(x0,0)
        ctx.lineTo(x0-arrowHeight,arrowWidth)
        ctx.lineTo(x0+arrowHeight,arrowWidth)
        ctx.closePath()
        ctx.fill()
        //绘制x轴的刻度
        for(var y=y0-space;y>arrowWidth;y-=space){
            ctx.beginPath()
            ctx.moveTo(x0,y)
            ctx.lineTo(x0+markWidth,y)
            ctx.stroke()
        }

        //绘制原点标题
        ctx.textBaseline ="top"
        ctx.font = "15px 微软雅黑"
        ctx.textAlign = "center"
        ctx.fillText("(0,0)",x0,y0+2)
    }

    //绘制网格的方法
    drawDrid(){
        var {canvas,space,x0,y0} = this
        // 定义当前坐标
        var x = x0,y = y0
        // 设置虚线
        ctx.setLineDash([5,10])
        //绘制水平方向的网格线
        for(y=y0+space;y>0;y-=space){
            //开启路径
            ctx.beginPath()

            ctx.moveTo(x0,y)
            ctx.lineTo(canvas.width,y)
            ctx.stroke()
        }
        //绘制垂直方向的网格线
        for(x=x0+space;x<canvas.width;x+=space){
            //开启路径
            ctx.beginPath()

            ctx.moveTo(x,0)
            ctx.lineTo(x,y0)
            ctx.stroke()
        }
        ctx.beginPath()
    }

    //坐标转换工具
    transform(x=0,y=0){
        var {padding,y0} = this
        x = x+padding
        y = y0- y
        return [x,y]
    }
}

使用插件

<script>
    var canvas = document.querySelector("canvas")
    var ctx = canvas.getContext("2d")

    //绘制坐标轴
    var draw = new DrawCoordinateSystem(canvas,20)
    //在此坐标轴绘制一个圆（转换坐标）
    ctx.arc(...draw.transform(100,100),80,0,Math.PI*2)
    ctx.fillStyle="yellow";
	ctx.fill();
</script>