HTML5 Canvas API 整理

Canvas

 

widthunsigned long300

heightunsigned long150

stringtoDataURL([Optional] string type, [Variadic] any args)

ObjectgetContext(string contextId)

 

----------------------------------------------------------------------------------

 

2D Context

 

canvasHTMLCanvasObject[readonly]

voidsave()

voidrestore()

 

----------------------------------------------------------------------------------

 

Compositing

 

globalAlphafloat1.0

globalCompositeOperationstringsource-over (source-over source-in source-out source-atop destination-over destination-in destination-out destination-atop darker lighter copy xor)

 

----------------------------------------------------------------------------------

 

Line styles

 

lineWidthfloat1.0

lineCapstringbutt (butt round square)

lineJoinstringmiter (bevel miter round)

miterLimitfloat10

 

----------------------------------------------------------------------------------

 

Colors, styles and shadows

 

strokeStyleanyblack

fillStyleanyblack

shadowOffsetXfloat0.0

shadowOffsetYfloat0.0

shadowBlurfloat0.0

shadowColorstringtransparent black

CanvasGradientcreateLinearGradient(float x0, float y0, float x1, float y1)

CanvasGradientcreateRadialGradient(float x0, float y0, float r0, float x1, float y1, float r1)

voidaddColorStop(float offset, string color)

CanvasPatterncreatePattern(Object image, string repetition)

//repeat(default) repeat-x repeat-y no-repeat

 

----------------------------------------------------------------------------------

 

Paths

 

voidbeginPath()

voidclosePath()

voidfill()

voidstroke()

voidclip()

voidmoveTo(float x, float y)

voidlineTo(float x, float y)

voidquadraticCurveTo(float cpx, float cpy, float x, float y)

voidbezierCurveTo(float cp1x, float cp1y, float cp2x, float cp2y, float x, float y)

voidarcTo(float x1, float y1, float x2, float y2, float radius)

voidarc(float x, float y, float radius, float startAngle, float endAngle, boolean anticlockwise)

voidrect(float x, float y, float w, float h)

booleanisPointInPath(float x, float y)

 

----------------------------------------------------------------------------------

 

Rectangles

 

voidclearRect(float x, float y, float w, float h)

voidfillRect(float x, float y, float w, float h)

voidstrokeRect(float x, float y, float w, float h)

 

----------------------------------------------------------------------------------

 

Text

 

fontstring10px sans-serif

textAlignstringstart (start end left right center)

textBaselinestringalphabetic (top hanging middle alphabetic ideographic bottom)

 

voidfillText(string text, float x, float y, [Optional] float maxWidth)

voidstrokeText(string text, float x, float y, [Optional] float maxWidth)

TextMetricsmeasureText(string text)

widthfloat[readonly]

 

----------------------------------------------------------------------------------

 

Transformation

 

voidscale(float x, float y)

voidrotate(float angle)

voidtranslate(float x, float y)

voidtransform(float m11, float m12, float m21, float m22, float dx, float dy)

voidsetTransform(float m11, float m12, float m21, float m22, float dx, float dy)

 

----------------------------------------------------------------------------------

 

Image drawing

 

voiddrawImage(Object image, float dx, float dy, [Optional] float dw, float dh)

image : HTMLImageElement HTMLCanvasElement HTMLVideoElement

voiddrawImage(Object image, float sx, float sy, float sw, float sh, float dx, float dy, float dw, float dh)

 

----------------------------------------------------------------------------------

 

Pixel manipulation

 

ImageDatacreateImageData(float sw, float sh)

ImageDatagetImageData(float sx, float sy, float sw, float sh)

widthunsigned long[readonly]

heightunsigned long[readonly]

dataCanvasPixelArray[readonly]

lengthunsigned long[readonly]

voidputImageData(ImageData imagedata, float dx, float dy, [Optional] float dirtyX, float dirtyY, float dirtyWidth, float dirtyHeight)

posted @ 2011-08-27 09:50 Elementstorm 阅读(...) 评论(...) 编辑 收藏