【js学习笔记-111】-----<canvas>图形属性

<canvas>图形属性

fillStyle、strokeStyle以及lineWidth属性。这些属性都是图形属性，分别指定了调用fill()和stroke()时候要采用的颜色以及调用stroke()方法绘制线段时的线段宽度。要注意的是，这些参数不是传递给fill()和stroke()方法的，而是作为画布的通用图形状态。如果定义一个绘制形状的方法，但是该方法没有设置这些属性，那么调用者可以调用该方法前，设置strokeStyle、fillStyle属性。这种将图形状态和绘制指令分离的细想是画布API中很重要的概念，同时也和通过在html文档中应用CSS样式来实现表现和内容分离是类似的

 

fillStyle	填充时候的颜色、渐变或图案等样式
font	绘制文本时候的CSS字体
globalAlpha	绘制像素时候要添加的透明度
globalCompositeOperation	如何合并新的像素点和下面的像素点
lineCap	如何渲染线段的末端
lineJoin	如何渲染顶点
lineWidth	外框线的宽度
miterLimit	紧急斜接顶点的最大长度
textAlign	文本水平对齐方式
textBaseline	文本垂直对齐方式
shadowBlur	阴影的清晰或模糊程序
shadowColor	下拉阴影的颜色
shadowOffsetX	阴影的水平偏移量
shadowOffsetY	阴影的垂直偏移量
strokeStyle	勾勒线段时的颜色，渐变或图案样式

 

每个<canvas>元素只有一个上下文对象，因此每次调用getContext()方法都会返回相同的CanvasRenderingContext2D对象。尽管画布api只允许一次设置单一的图形属性集合，但是它允许保存当前图形状态，这样就可以在多个状态之间切换，之后也可以很方便地恢复。调用save()方法会将当前图形状态压入用于已保存状态的栈上。调用restore()方法会从栈中弹出并恢复最近一次保存的状态。包括当前的转换信息以及裁剪区等信息都是已保存状态的一部分。但是，很重要的一点是：当前定义的路径以及不属于图形状态的当前点都不能保存和恢复。

 

//恢复最后一次保存的图形状态，但是让该状态从栈中弹出

    CanvasRenderingContext2D.prototype.revert =function(){

        this.restore();

        this.save();

        return this;

    }

    //通过o对象属性来设置图形属性

    //或者如果没有提供参数，就以对象的方式返回当前属性

    //要注意的是，它不处理变换和裁剪区域

    CanvasRenderingContext2D.prototype.attrs =function(o){

        if(o){

            for(var a in o){

                this[a] = o[a];

            }

            return this;

        }else{

             return {

                 fillStyle:this.fillStyle,font:this.font,

                 globalAlpha:this.globalAlpha,

                globalCompositeOperation:this.globalCompositeOperation,

                lineCap:this.lineCap,lineJoin:this.lineJoin,

                lineWidth:this.lineWidth,miterLimit:this.miterLimit,

                textAlign:this.textAlign,textBaseline:this.textBaseline,

                shadowBlur:this.shadowBlur,shadowColor:this.shadowColor,

                shadowOffsetX:this.shadowOffsetX,shadowOffsetY:this.shadowOffsetY,

                 strokeStyle:this.strokeStyle

             }

        }

    }