canvas(七)繪制網格和坐標軸

1.繪制網格

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

    function DrawDrid(canvas,space){
        var canvas = canvas || document.querySelector("canvas")
        // 設置間隔
        var space = 50
        // 定義當前坐標
        var x = 0,y = 0
        // 設置虛線
        ctx.setLineDash([5,10])
        //繪制水平方向的網格線
        for(y=space;y<canvas.height;y+=space){
            //開啟路徑
            ctx.beginPath()
            
            ctx.moveTo(0,y)
            ctx.lineTo(canvas.width,y)
            ctx.stroke()
        }
        //繪制垂直方向的網格線
        for(x=space;x<canvas.width;x+=space){
            //開啟路徑
            ctx.beginPath()
            
            ctx.moveTo(x,0)
            ctx.lineTo(x,canvas.height)
            ctx.stroke()
        }
    }
</script>

2.繪制坐標軸

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

    function DrawAxis(canvas,padding){
        //根據padding計算原點
        var x0 = 0+padding,y0 = canvas.height-padding

        //定義箭頭的長度和高度
        var arrowWidth = 30
        var arrowHeight = 5

        //定義刻度間隔
        var space = 50
        //定義刻度長度
        var markWidth = 5

        //繪制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)
    }

    DrawAxis(canvas,20)
</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>