HTML5_Canvas_技巧手册

http://blog.nihilogic.dk/ Canvas element Attributes Name Type Default width unsigned long 300 height unsigned long 150 Methods Return Name string toDataURL( [Optional] string type, [Variadic] any args) Object getContext( string contextId) 2D Context Attributes Name Type canvas HTMLCanvasObject [readonly] Methods Return Name void save( ) void restore( ) Transformation Methods Return Name void scale( float x, float y) void rotate( float angle) void translate( float x, float y) void transform( float m11, float m12, float m21, float m22, float dx, float dy) void setTransform( float m11, float m12, float m21, float m22, float dx, float dy) Image drawing Methods Return Name void drawImage( Object image, float dx, float dy, [Optional] float dw, float dh) Argument "image" can be of type HTMLImageElement, HTMLCanvasElement or HTMLVideoElement void drawImage( Object image, float sx, float sy, float sw, float sh, float dx, float dy, float dw, float dh) Compositing Attributes Name Type Default globalAlpha float 1.0 globalCompositeOperation string source-over Supports any of the following values: source-over source-in source-out source-atop destination-over destination-in destination-out destination-atop lighter copy xor Line styles Attributes Name Type Default lineWidth float 1.0 lineCap string butt Supports any of the following values: butt round square lineJoin string miter Supports any of the following values: round bevel miter miterLimit float 10 HTML5 Canvas Cheat Sheet v1.1 Colors, styles and shadows Attributes Name Type Default strokeStyle any black fillStyle any black shadowOffsetX float 0.0 shadowOffsetY float 0.0 shadowBlur float 0.0 shadowColor string transparent black Methods Return Name CanvasGradient createLinearGradient( float x0, float y0, float x1, float y1) CanvasGradient createRadialGradient( float x0, float y0, float r0, float x1, float y1, float r1) CanvasPattern createPattern( Object image, string repetition) Argument "image" can be of type HTMLImageElement, HTMLCanvasElement or HTMLVideoElement "repetition" supports any of the following values: [repeat (default), repeat-x, repeat-y, no-repeat] CanvasGradient interface void addColorStop( float offset, string color) CanvasPattern interface No attributes or methods. Paths Methods Return Name void beginPath( ) void closePath( ) void fill( ) void stroke( ) void clip( ) void moveTo( float x, float y) void lineTo( float x, float y) void quadraticCurveTo( float cpx, float cpy, float x, float y ) void bezierCurveTo( float cp1x, float cp1y, float cp2x, float cp2y, float x, float y ) void arcTo( float x1, float y1, float x2, float y2, float radius ) void arc( float x, float y, float radius, float startAngle, float endAngle, boolean anticlockwise ) void rect( float x, float y, float w, float h) boolean isPointInPath( float x, float y) Text Attributes Name Type Default font string 10px sans-serif textAlign string start Supports any of the following values: [start, end, left, right, center] textBaseline string alphabetic Supports any of the following values: [top, hanging, middle, alphabetic, ideographic, bottom] Methods Return Name void fillText( string text, float x, float y, [Optional] float maxWidth) void strokeText( string text, float x, float y, [Optional] float maxWidth) TextMetrics measureText( string text) TextMetrics interface width float [readonly] Rectangles Methods Return Name void clearRect( float x, float y, float w, float h) void fillRect( float x, float y, float w, float h) void strokeRect( float x, float y, float w, float h) Pixel manipulation Methods Return Name ImageData createImageData( float sw, float sh) ImageData createImageData( ImageData imagedata) ImageData getImageData( float sx, float sy, float sw, float sh) void putImageData( ImageData imagedata, float dx, float dy, [Optional] float dirtyX, float dirtyY, float dirtyWidth, float dirtyHeight) ImageData interface width unsigned long [readonly] height unsigned long [readonly] data CanvasPixelArray [readonly] CanvasPixelArray interface length unsigned long [readonly] Source: http://www.whatwg.org/specs/web-apps/current-work/ (2009-05-04)