Html Canvas

Canvas

        可以透過Java Script 繪圖

移動畫筆

        moveTo(xPoint, yPoint);

畫直線

        lineTo(xPoint, yPoint);

畫矩形

        fillRect(0, 0, this.GetWidth(),this. GetHeight())

 SetGrid(xGap, yGap) ;

Js Code 

class CanvasObject {

    constructor(name) {

        this.Element = document.getElementById(name)

        this.ctx = this.Element.getContext("2d")

    }

    SetBackgroundColor(color) {

        this.ctx.fillStyle = color

        this.ctx.fillRect(0, 0, this.GetWidth(),this. GetHeight())

    }

    SetGrid(xGap, yGap) {

        for (var i = 0; i < this.GetWidth(); i += xGap) {

            this.DrawLine(i, 0, i, this.GetHeight())

        }

        for (var j = 0; j < this.GetHeight(); j += xGap) {

            this.DrawLine(0, j, this.GetWidth(),j)

        }

    }

    DrawLine(xStart, yStart, xEnd, yEnd, color) {

        this.ctx.beginPath();

        this.ctx.strokeStyle = color;

        this.ctx.moveTo(xStart, yStart);

        this.ctx.lineTo(xEnd, yEnd);

        this.ctx.lineWidth = 1;

        this.ctx.stroke();

    }

    GetWidth() {

        return this.Element.width

    }

    GetHeight() {

        return this.Element.height

    }

}

<script>

    $(function () {

        var canvasObject = new CanvasObject("canvas");

        canvasObject.SetBackgroundColor("lightGray")

        canvasObject.SetGrid(10,10)

    })

</script>

<canvas id="canvas" width="400" height="400"></canvas>