HTML5 Canvas Cheat Sheet - تلخيص مختصر لـ إتش تي إم إل فايڤ كانڤاس

· · 553 كلمة · 3 دقيقة قراءة

Canvas Element 🔗

Attributes 🔗

NameTypeDefault
widthunsigned long300
heightunsigned long150

Methods 🔗

ReturnName
stringtoDataURL([optional] string type,[variadic] any args)
objectgetContext(string contextId)

2D Context 🔗

  • Attributes
NameType
canvasHTMLCanvasObject [readonly]
  • Methods

| Return | Name | | void | save() | | void | restore() |

Transformation 🔗

  • Methods
ReturnName
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 🔗

Method 🔗

ReturnName
voiddrawImage(object image, float dx, float dy,[optional] float dw, float dh) Argument “image” can be of type HTMLImageElement, HTMLCanvasElement or HTMLVideoElement
voiddrawImage(object image, float sx, float sy, float sw, float sh,float dx, float dy, float dw, float dh)

Compositing 🔗

  • Attributes
NameTypeDefault
globalAlphafloat1.0
globalCompositeOperationstringsource-over

supports any of the following values 🔗

image drawing on html5 canvas

Line Style 🔗

  • Attributes
NameTypeDefault
lineWidthfloat1.0
lineCapstringbutt
lineJoinstringmiter
miterLimitfloat10
  • butt Supports any of the following values:

linecap html5 canvas

  • miter supports any of the following values:

html5 miter linejoin canvas

Colors, Styles and Shadows 🔗

  • Attributes
NameTypeDefault
strokeStyleanyblack
fillStyleanyblack
shadowOffsetXfloat0.0
shadowOffsetYfloat0.0
shadowBlurfloat0.0
shadowColorstringtransparent black
  • Methods
ReturnName
canvasGradientcreateLinearGradient(float x0, float y0, float x1, float y1)
canvasGradientcreateRadialGradient(float x0, float y0, float r0,float x1, float y1, float r1)
canvasPatterncreatePattern(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 🔗

ReturnName
voidaddColorStop(float offset, string color)

canvasPattern interface 🔗

| Return | Name | | No attributes or methods. |

Paths 🔗

  • Methods
    ReturnName
    voidbeginPath()
    voidcloasePath()
    voidfill()
    voidstroke()
    voidclip()
    voidmoveTo(float x, float y)
    voidlineTo(float x, float y)
    voidquadracticCurveTo(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)

Text 🔗

  • Attributes
    NameTypeDefault
    fontstring10px sans-serif
    textAlignstringstart, supports any of the following values: [start, end, left, right, center]
    textBaselinestringalphabetic, supports any of the following values: [top, hanging, middle, alphabetic, ideographic, bottom]
  • Methods
    ReturnName
    voidfillText(string text, float x, float y, [optional] float maxWidth)
    voidstrokeText(string text, float x, float y, [optional] float maxWidth)
    TextMetricsmeasureText(string text)

TextMetrics interface 🔗

NameTypeDefault
widthfloat[readonly]

Rectangles 🔗

  • Methods
ReturnName
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)

Pixel Manipulation 🔗

  • Methods
    ReturnName
    ImageDatacreateImageData(float sw, float sh)
    ImageDatacreateImageData(ImageData imagedata)
    ImageDatagetImageData(float sx, float sy, float sw, float sh)
    voidputImageData(ImageData imagedata, float dx, float dy,[optional] float dirtyx, float dirtyY, float dirtyWidth, float dirtyHeight)

ImageData interface 🔗

NameTypeDefault
widthunsigned long[readonly]
heightunsigned long[readonly]
datacanvasPixelArray[readonly]

canvasPixelArray interface 🔗

NameTypeDefault
lengthunsigned long[readonly]
التصنيفات: برمجة
مشاركة: