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)
