HTML5 Canvas Cheat Sheet - تلخيص مختصر لـ إتش تي إم إل فايڤ كانڤاس 14/01/2018
·
553 كلمة
·
3 دقيقة قراءة 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 🔗 Name Type canvas HTMLCanvasObject [readonly]
| Return | Name |
| void | save() |
| void | restore() |
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 🔗 Method 🔗 Return Name void drawImage(object image, float dx, float dy,[optional] float dw, float dh) Argument “image” can be of type HTMLImageElement, HTMLCanvasElement or HTMLVideoElementvoid drawImage(object image, float sx, float sy, float sw, float sh,float dx, float dy, float dw, float dh)
Compositing 🔗 Name Type Default globalAlpha float 1.0 globalCompositeOperation string source-over
supports any of the following values 🔗
Line Style 🔗 Name Type Default lineWidth float 1.0 lineCap string butt lineJoin string miter miterLimit float 10
butt Supports any of the following values:
miter supports any of the following values:
Colors, Styles and Shadows 🔗 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
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 🔗 Return Name void addColorStop(float offset, string color)
canvasPattern interface 🔗 | Return | Name |
| No attributes or methods. |
Paths 🔗 MethodsReturn Name void beginPath()void cloasePath()void fill()void stroke()void clip()void moveTo(float x, float y)void lineTo(float x, float y)void quadracticCurveTo(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 🔗 AttributesName 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]
MethodsReturn 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 🔗 Name Type Default width float [readonly]
Rectangles 🔗 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 🔗 MethodsReturn 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 🔗 Name Type Default width unsigned long [readonly] height unsigned long [readonly] data canvasPixelArray [readonly]
canvasPixelArray interface 🔗 Name Type Default length unsigned long [readonly]
