HTML5 Canvas Cheat Sheet - تلخيص مختصر

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

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 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:

HTML5 Canvas Cheatsheet - تلخيص

Line Style

Attributes

Name Type Default
lineWidth float 1.0
lineCap string butt

Supports any of the following values:

lineCap HTML5 canvas values

lineJoin string miter

supports any of the following values:

HTML5 lineJoin canvas values

miterLimit float 10

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

Return Name
void addColorStop(float offset, string color)

canvasPattern interface

Return Name
No attributes or methods.

Paths

Methods

Return 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

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

Name Type Default
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

Name Type Default
width unsigned long [readonly]
height unsigned long [readonly]
data canvasPixelArray [readonly]

canvasPixelArray interface

Name Type Default
length unsigned long [readonly]
تعليقات الفيسبوك
0 تعليقات جوجل

0 تعليقات:

إرسال تعليق