HTML5新特性 canvas 实践

HTML5新特性 canvas 实践 —— Painter

GitHub地址: https://github.com/cong25825933/painter
项目发布地址： http://moyuyc.xyz/painter

功能说明

绘制基本的点线圆等
绘制线采用中点画线法

    function (paint, color, linewidth) {
            this.color = color?color:this.color;
            this.linewidth = linewidth!=null?linewidth:this.linewidth;
            color = this.color; linewidth = this.linewidth;
            var ep = this.ep, sp = this.sp,
                dX = ep.x - sp.x,
                dY = ep.y - sp.y,
                a = sp.y - ep.y,
                b = ep.x - sp.x;
            if (Math.abs(dX) >= Math.abs(dY)) {
                if (dX >= 0 && dY >= 0) {
                    var d = b + 2 * a, d1 = 2 * a, d2 = 2 * (a + b);
                    new Shape.Point(sp.x, sp.y).draw(paint, color, linewidth);
                    for (var x = sp.x + 1, y = sp.y; x < ep.x; x++) {
                        if (d >= 0) d = d + d1;
                        else {
                            y++;
                            d = d + d2;
                        }
                        new Shape.Point(x, y).draw(paint, color, linewidth);
                    }
                }
                else if (dX >= 0 && dY <= 0) {
                    var d = -b + a << 1, d1 = (a - b) << 1, d2 = a << 1;
                    new Shape.Point(sp.x, sp.y).draw(paint, color, linewidth);
                    for (var x = sp.x + 1, y = sp.y; x < ep.x; x++) {
                        if (d >= 0) {
                            y--;
                            d = d + d1;
                        }
                        else d = d + d2;
                        new Shape.Point(x, y).draw(paint, color, linewidth);
                    }
                }
                else if (dX <= 0 && dY <= 0) {
                    var d = -b - 2 * a, d1 = -2 * a, d2 = -2 * (a + b);
                    new Shape.Point(sp.x, sp.y).draw(paint, color, linewidth);
                    for (var x = sp.x - 1, y = sp.y; x > ep.x; x--) {
                        if (d >= 0) d = d + d1;
                        else {
                            y--;
                            d = d + d2;
                        }
                        new Shape.Point(x, y).draw(paint, color, linewidth);
                    }
                }
                else {
                    var d = b - 2 * a, d1 = 2 * (b - a), d2 = -2 * a;
                    new Shape.Point(sp.x, sp.y).draw(paint, color, linewidth);
                    for (var x = sp.x - 1, y = sp.y; x > ep.x; x--) {
                        if (d >= 0) {
                            y++;
                            d = d + d1;
                        }
                        else d = d + d2;
                        new Shape.Point(x, y).draw(paint, color, linewidth);
                    }
                }
            }
            else {
                if (dX >= 0 && dY >= 0) {
                    var d = a + 2 * b, d1 = 2 * (a + b), d2 = 2 * b;
                    new Shape.Point(sp.x, sp.y).draw(paint, color, linewidth);
                    for (var x = sp.x, y = sp.y + 1; y < ep.y; y++) {
                        if (d >= 0) {
                            x++;
                            d = d + d1;
                        }
                        else {
                            d = d + d2;
                        }
                        new Shape.Point(x, y).draw(paint, color, linewidth);
                    }
                }
                else if (dX >= 0 && dY <= 0) {
                    var d = a - 2 * b, d1 = -2 * b, d2 = 2 * (a - b);
                    new Shape.Point(sp.x, sp.y).draw(paint, color, linewidth);
                    for (var x = sp.x, y = sp.y - 1; y > ep.y; y--) {
                        if (d >= 0)      d = d + d1;
                        else {
                            x++;
                            d = d + d2;
                        }
                        new Shape.Point(x, y).draw(paint, color, linewidth);
                    }

                }
                else if (dX <= 0 && dY <= 0) {
                    var d = -a - 2 * b, d1 = -2 * (a + b), d2 = -2 * b;
                    new Shape.Point(sp.x, sp.y).draw(paint, color, linewidth);
                    for (var x = sp.x, y = sp.y - 1; y > ep.y; y--) {
                        if (d >= 0) {
                            x--;
                            d = d + d1;
                        }
                        else               d = d + d2;
                        new Shape.Point(x, y).draw(paint, color, linewidth);
                    }

                }
                else {
                    var d = -a + 2 * b, d1 = 2 * b, d2 = 2 * (b - a);
                    new Shape.Point(sp.x, sp.y).draw(paint, color, linewidth);
                    for (var x = sp.x, y = sp.y + 1; y < ep.y; y++) {
                        if (d >= 0)           d = d + d1;
                        else {
                            x--;
                            d = d + d2;
                        }
                        new Shape.Point(x, y).draw(paint, color, linewidth);
                    }
                }
            }
            return this;
        }

绘制圆采用八分法

function (paint, color, linewidth) {
            this.color = color?color:this.color;
            this.linewidth = linewidth?linewidth:this.linewidth;
            color = this.color; 
            linewidth = this.linewidth;
            //console.log(color);
            var r = this.r, cp = this.cp,
                d = 1 - r, p = new Shape.Point(0, r);
            while (p.x <= p.y) {
                new Shape.Point(cp.x + p.x, cp.y + p.y).draw(paint, color, linewidth);
                new Shape.Point(cp.x + p.x, cp.y - p.y).draw(paint, color, linewidth);
                new Shape.Point(cp.x - p.x, cp.y + p.y).draw(paint, color, linewidth);
                new Shape.Point(cp.x - p.x, cp.y - p.y).draw(paint, color, linewidth);
                new Shape.Point(cp.x + p.y, cp.y + p.x).draw(paint, color, linewidth);
                new Shape.Point(cp.x + p.y, cp.y - p.x).draw(paint, color, linewidth);
                new Shape.Point(cp.x - p.y, cp.y + p.x).draw(paint, color, linewidth);
                new Shape.Point(cp.x - p.y, cp.y - p.x).draw(paint, color, linewidth);
                p.x++;
                if (d < 0) d = d + 2 * p.x + 1;
                else {
                    p.y--;
                    d = d + 2 * p.x - 2 * p.y + 1;
                }
            }
            return this;
        }

绘制路径方法

        function (paint,color,linewidth) {
            this.color = color?color:this.color;
            this.linewidth = linewidth?linewidth:this.linewidth;
            color = this.color; linewidth = this.linewidth;
            //console.log(color);
            var arr = this.ps;
            if(arr.length==0)  return;
            paint.beginPath();
            paint.strokeStyle = color ? color : 'black';
            paint.lineWidth = linewidth ? linewidth : 1;
            paint.moveTo(arr[0].x,arr[0].y);
            for(var i =1;i<arr.length;i++){
                paint.lineTo(arr[i].x,arr[i].y);
            }
            paint.stroke();
            return this;
        }

以上代码中的 this.linewidth，this.color 是用来保存图形信息的，用于重绘图形。

简单图像处理功能

1. 利用KMenus算法找出某图像的主要rgb，并显示出来。

   

2. 利用矩阵计算 生成浮雕图，灰度图，反色图等。