GCanvas/node/examples/brush.js

const fs = require('fs')
const path = require('path');
const out = fs.createWriteStream(path.join(__dirname, "..")+ '/brush.png');

const { createCanvas, Image } = require('../export')

function WriteFont(options) {
    var self = this;
    this.canvas = createCanvas(400, 600);
    var obj = {
        canvas: this.canvas,
        context: this.canvas.getContext("2d"),
        isWrite: false,
        lastWriteTime: -1,
        lastWriteSpeed: 0,
        lastWriteWidth: 0,
        canvasWidth: this.canvas.width,
        canvasHeight: this.canvas.height,
        isShowBorder: true,
        bgColor: '#fff',
        borderWidth: 6,
        borderColor: 'red',
        lastPoint: {},
        writeWidth: 6,
        maxWriteWidth: 30,
        minWriteWidth: 1,
        writeColor: '#000'
    }
    for (var name in options) {
        obj[name] = options[name];
    }
    this.setLineWidth = function () {
        var nowTime = new Date().getTime();
        var diffTime = nowTime - obj.lastWriteTime;
        obj.lastWriteTime = nowTime;
        var returnNum = obj.minWriteWidth + (obj.maxWriteWidth - obj.minWriteWidth) * diffTime / 30;
        if (returnNum < obj.minWriteWidth) {
            returnNum = obj.minWriteWidth;
        } else if (returnNum > obj.maxWriteWidth) {
            returnNum = obj.maxWriteWidth;
        }
        returnNum = returnNum.toFixed(2);
        obj.context.lineWidth = obj.lastWriteWidth = obj.lastWriteWidth / 4 * 3 + returnNum / 4;
    }

    this.writing = function (point) {

        obj.context.beginPath();
        obj.context.moveTo(obj.lastPoint.x, obj.lastPoint.y);
        obj.context.lineTo(point.x, point.y);
        self.setLineWidth();
        obj.context.stroke();
        obj.lastPoint = point;
        obj.context.closePath();
    }

    this.writeContextStyle = function () {
        obj.context.beginPath();
        obj.context.strokeStyle = obj.writeColor;
        obj.context.lineCap = 'round';
        obj.context.lineJoin = "round";
    }

    this.writeBegin = function (point) {
        obj.isWrite = true;
        obj.lastWriteTime = new Date().getTime();
        obj.lastPoint = point;
        self.writeContextStyle();
    }
    this.writeEnd = function () {
        obj.isWrite = false;
    }
    this.canvasClear = function () {
        obj.context.save();
        obj.context.strokeStyle = '#fff';
        obj.context.clearRect(0, 0, obj.canvasWidth, obj.canvasHeight);
        if (obj.isShowBorder) {
            console.log('show border');
            obj.context.beginPath();
            var size = obj.borderWidth / 2;
            //画外面的框
            obj.context.moveTo(size, size);
            obj.context.lineTo(obj.canvasWidth - size, size);
            obj.context.lineTo(obj.canvasWidth - size, obj.canvasHeight - size);
            obj.context.lineTo(size, obj.canvasHeight - size);
            obj.context.closePath();
            obj.context.lineWidth = obj.borderWidth;
            obj.context.strokeStyle = obj.borderColor;
            obj.context.stroke();
            //画里面的框
            obj.context.moveTo(0, 0);
            obj.context.lineTo(obj.canvasWidth, obj.canvasHeight);
            obj.context.lineTo(obj.canvasWidth, obj.canvasHeight / 2);
            obj.context.lineTo(obj.canvasWidth, obj.canvasHeight / 2);
            obj.context.lineTo(0, obj.canvasHeight / 2);
            obj.context.lineTo(0, obj.canvasHeight);
            obj.context.lineTo(obj.canvasWidth, 0);
            obj.context.lineTo(obj.canvasWidth / 2, 0);
            obj.context.lineTo(obj.canvasWidth / 2, obj.canvasHeight);
            obj.context.stroke();
        }
        obj.context.restore();
    }

    this.canvasInit = function () {
        this.canvas.width = obj.canvasWidth;
        this.canvas.height = obj.canvasHeight;
    }

    // this.canvasInit();
    // this.canvasClear();
    this.option = obj;
    obj.control = {
        clearCanvas: self.canvasClear
    };

    this.save = function () {
        var stream = obj.canvas.createPNGStream();
        stream.pipe(out);
    }
}

var writeCanvas = new WriteFont({
    borderWidth: 10,
    borderColor: '#ff6666'
});

writeCanvas.canvasInit();
writeCanvas.canvasClear();
writeCanvas.save();