本文共 2251 字，大约阅读时间需要 7 分钟。

===============================================================

## '2d'对应的Canvas的上下文对象class CanvasRenderingContext2D : public CanvasRenderingContext, public CanvasPathMethods {{>>strokeStyle ,fillStyle>>lineWidth,lineCap,lineJoin>>miterLimit,LineDash,LineDashOffset>>shadowOffsetX,shadowOffsetY,shdowBlue,shadowColor>>globalAlpha,globalCompositeOperation>>save()、restore()>>scale()、rotate()、translate()、transform()>>strokeColor、FillColor>>beginPath()>>file()、stroke()、clip()、fillRect()、setShadow()>>drawImage()>>setAlaph()>>createLinearGradient()createRadialGradient()、createPattern()>>createImageData()、putImageData()>>font()、textAligh()、fillText()textBaseLine()、strokeText()>>lineCap()}

## 观察者是所谓的一套通知的接口而已（HTMLCanvasElement会触发以下的接口,外部关注则重载）class CanvasObserver {public:    virtual ~CanvasObserver() { }    virtual void canvasChanged(HTMLCanvasElement*, const FloatRect& changedRect) = 0;    virtual void canvasResized(HTMLCanvasElement*) = 0;    virtual void canvasDestroyed(HTMLCanvasElement*) = 0;};## 真正的观察者便重载该接口即可(HTMLCanvasElement通知CSSCavasValue变化)class CanvasObserverProxy : public CanvasObserver {public:	CanvasObserverProxy(CSSCanvasValue* ownerValue) : m_ownerValue(ownerValue) { }	virtual ~CanvasObserverProxy() { }	virtual void canvasChanged(HTMLCanvasElement* canvas, const FloatRect& changedRect)	{		m_ownerValue->canvasChanged(canvas, changedRect);	}	virtual void canvasResized(HTMLCanvasElement* canvas)	{		m_ownerValue->canvasResized(canvas);	}        virtual void canvasDestroyed(HTMLCanvasElement* canvas)        {            m_ownerValue->canvasDestroyed(canvas);        }private:        CSSCanvasValue* m_ownerValue;}## 监听的CSSCanvasValue的操作class CSSCanvasValue : public CSSImageGeneratorValue {## 通知CSSValue的受众RenderObjectvoid CSSCanvasValue::canvasChanged(HTMLCanvasElement*, const FloatRect& changedRect){    IntRect imageChangeRect = enclosingIntRect(changedRect);    HashCountedSet
   
    ::const_iterator end = clients().end();    for (HashCountedSet
    
     ::const_iterator curr = clients().begin(); curr != end; ++curr)        const_cast
     
      (curr->key)->imageChanged(static_cast
      
       (this), &imageChangeRect);}## 关于样式图片的一个继承和调度的关系StyleImage=>StyleGeneratedImage=>CSSImageGeneratorValue=>CSSCanvasValue