接口 CanvasRenderingContext2D

The CanvasRenderingContext2D interface, part of the Canvas API, provides the 2D rendering context for the drawing surface of a

interface CanvasRenderingContext2D {
    canvas: HTMLCanvasElement;
    direction: CanvasDirection;
    fillStyle: string | CanvasGradient | CanvasPattern;
    filter: string;
    font: string;
    fontKerning: CanvasFontKerning;
    globalAlpha: number;
    globalCompositeOperation: GlobalCompositeOperation;
    imageSmoothingEnabled: boolean;
    imageSmoothingQuality: ImageSmoothingQuality;
    lineCap: CanvasLineCap;
    lineDashOffset: number;
    lineJoin: CanvasLineJoin;
    lineWidth: number;
    miterLimit: number;
    shadowBlur: number;
    shadowColor: string;
    shadowOffsetX: number;
    shadowOffsetY: number;
    strokeStyle: string | CanvasGradient | CanvasPattern;
    textAlign: CanvasTextAlign;
    textBaseline: CanvasTextBaseline;
    arc(x: number, y: number, radius: number, startAngle: number, endAngle: number, counterclockwise?: boolean): void;
    arcTo(x1: number, y1: number, x2: number, y2: number, radius: number): void;
    beginPath(): void;
    bezierCurveTo(cp1x: number, cp1y: number, cp2x: number, cp2y: number, x: number, y: number): void;
    clearRect(x: number, y: number, w: number, h: number): void;
    clip(fillRule?: CanvasFillRule): void;
    clip(path: Path2D, fillRule?: CanvasFillRule): void;
    closePath(): void;
    createConicGradient(startAngle: number, x: number, y: number): CanvasGradient;
    createImageData(sw: number, sh: number, settings?: ImageDataSettings): ImageData;
    createImageData(imagedata: ImageData): ImageData;
    createLinearGradient(x0: number, y0: number, x1: number, y1: number): CanvasGradient;
    createPattern(image: CanvasImageSource, repetition: null | string): null | CanvasPattern;
    createRadialGradient(x0: number, y0: number, r0: number, x1: number, y1: number, r1: number): CanvasGradient;
    drawFocusIfNeeded(element: Element): void;
    drawFocusIfNeeded(path: Path2D, element: Element): void;
    drawImage(image: CanvasImageSource, dx: number, dy: number): void;
    drawImage(image: CanvasImageSource, dx: number, dy: number, dw: number, dh: number): void;
    drawImage(image: CanvasImageSource, sx: number, sy: number, sw: number, sh: number, dx: number, dy: number, dw: number, dh: number): void;
    ellipse(x: number, y: number, radiusX: number, radiusY: number, rotation: number, startAngle: number, endAngle: number, counterclockwise?: boolean): void;
    fill(fillRule?: CanvasFillRule): void;
    fill(path: Path2D, fillRule?: CanvasFillRule): void;
    fillRect(x: number, y: number, w: number, h: number): void;
    fillText(text: string, x: number, y: number, maxWidth?: number): void;
    getContextAttributes(): CanvasRenderingContext2DSettings;
    getImageData(sx: number, sy: number, sw: number, sh: number, settings?: ImageDataSettings): ImageData;
    getLineDash(): number[];
    getTransform(): DOMMatrix;
    isPointInPath(x: number, y: number, fillRule?: CanvasFillRule): boolean;
    isPointInPath(path: Path2D, x: number, y: number, fillRule?: CanvasFillRule): boolean;
    isPointInStroke(x: number, y: number): boolean;
    isPointInStroke(path: Path2D, x: number, y: number): boolean;
    lineTo(x: number, y: number): void;
    measureText(text: string): TextMetrics;
    moveTo(x: number, y: number): void;
    putImageData(imagedata: ImageData, dx: number, dy: number): void;
    putImageData(imagedata: ImageData, dx: number, dy: number, dirtyX: number, dirtyY: number, dirtyWidth: number, dirtyHeight: number): void;
    quadraticCurveTo(cpx: number, cpy: number, x: number, y: number): void;
    rect(x: number, y: number, w: number, h: number): void;
    resetTransform(): void;
    restore(): void;
    rotate(angle: number): void;
    roundRect(x: number, y: number, w: number, h: number, radii?: number | DOMPointInit | (number | DOMPointInit)[]): void;
    save(): void;
    scale(x: number, y: number): void;
    setLineDash(segments: number[]): void;
    setTransform(a: number, b: number, c: number, d: number, e: number, f: number): void;
    setTransform(transform?: DOMMatrix2DInit): void;
    stroke(): void;
    stroke(path: Path2D): void;
    strokeRect(x: number, y: number, w: number, h: number): void;
    strokeText(text: string, x: number, y: number, maxWidth?: number): void;
    transform(a: number, b: number, c: number, d: number, e: number, f: number): void;
    translate(x: number, y: number): void;
}

层级 (查看完整内容)

属性

filter

filter: string

font

font: string

fontKerning

fontKerning: CanvasFontKerning

globalAlpha

globalAlpha: number

globalCompositeOperation

globalCompositeOperation: GlobalCompositeOperation

imageSmoothingEnabled

imageSmoothingEnabled: boolean

imageSmoothingQuality

imageSmoothingQuality: ImageSmoothingQuality

lineCap

lineCap: CanvasLineCap

lineDashOffset

lineDashOffset: number

lineJoin

lineJoin: CanvasLineJoin

lineWidth

lineWidth: number

miterLimit

miterLimit: number

shadowBlur

shadowBlur: number

shadowColor

shadowColor: string

shadowOffsetX

shadowOffsetX: number

shadowOffsetY

shadowOffsetY: number

strokeStyle

strokeStyle: string | CanvasGradient | CanvasPattern

textAlign

textAlign: CanvasTextAlign

textBaseline

textBaseline: CanvasTextBaseline

方法

arc

arc(x, y, radius, startAngle, endAngle, counterclockwise?): void
参数
- x: number
- y: number
- radius: number
- startAngle: number
- endAngle: number
- 可选counterclockwise: boolean
返回 void
继承自 CanvasPath.arc

arcTo

arcTo(x1, y1, x2, y2, radius): void
参数
- x1: number
- y1: number
- x2: number
- y2: number
- radius: number
返回 void
继承自 CanvasPath.arcTo

beginPath

beginPath(): void
返回 void
继承自 CanvasDrawPath.beginPath

bezierCurveTo

bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y): void
参数
- cp1x: number
- cp1y: number
- cp2x: number
- cp2y: number
- x: number
- y: number
返回 void
继承自 CanvasPath.bezierCurveTo

clearRect

clearRect(x, y, w, h): void
参数
- x: number
- y: number
- w: number
- h: number
返回 void
继承自 CanvasRect.clearRect

clip

clip(fillRule?): void
参数
- 可选fillRule: CanvasFillRule
返回 void
继承自 CanvasDrawPath.clip
clip(path, fillRule?): void
参数
- path: Path2D
- 可选fillRule: CanvasFillRule
返回 void
继承自 CanvasDrawPath.clip

closePath

closePath(): void
返回 void
继承自 CanvasPath.closePath

createConicGradient

createConicGradient(startAngle, x, y): CanvasGradient
参数
- startAngle: number
- x: number
- y: number
返回 CanvasGradient
继承自 CanvasFillStrokeStyles.createConicGradient

createImageData

createImageData(sw, sh, settings?): ImageData
参数
- sw: number
- sh: number
- 可选settings: ImageDataSettings
返回 ImageData
继承自 CanvasImageData.createImageData
createImageData(imagedata): ImageData
参数
- imagedata: ImageData
返回 ImageData
继承自 CanvasImageData.createImageData

createLinearGradient

createLinearGradient(x0, y0, x1, y1): CanvasGradient
参数
- x0: number
- y0: number
- x1: number
- y1: number
返回 CanvasGradient
继承自 CanvasFillStrokeStyles.createLinearGradient

createPattern

createPattern(image, repetition): null | CanvasPattern
参数
- image: CanvasImageSource
- repetition: null | string
返回 null | CanvasPattern
继承自 CanvasFillStrokeStyles.createPattern

createRadialGradient

createRadialGradient(x0, y0, r0, x1, y1, r1): CanvasGradient
参数
- x0: number
- y0: number
- r0: number
- x1: number
- y1: number
- r1: number
返回 CanvasGradient
继承自 CanvasFillStrokeStyles.createRadialGradient

drawFocusIfNeeded

drawFocusIfNeeded(element): void
参数
- element: Element
返回 void
继承自 CanvasUserInterface.drawFocusIfNeeded
drawFocusIfNeeded(path, element): void
参数
- path: Path2D
- element: Element
返回 void
继承自 CanvasUserInterface.drawFocusIfNeeded

drawImage

drawImage(image, dx, dy): void
参数
- image: CanvasImageSource
- dx: number
- dy: number
返回 void
继承自 CanvasDrawImage.drawImage
drawImage(image, dx, dy, dw, dh): void
参数
- image: CanvasImageSource
- dx: number
- dy: number
- dw: number
- dh: number
返回 void
继承自 CanvasDrawImage.drawImage
drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh): void
参数
- image: CanvasImageSource
- sx: number
- sy: number
- sw: number
- sh: number
- dx: number
- dy: number
- dw: number
- dh: number
返回 void
继承自 CanvasDrawImage.drawImage

ellipse

ellipse(x, y, radiusX, radiusY, rotation, startAngle, endAngle, counterclockwise?): void
参数
- x: number
- y: number
- radiusX: number
- radiusY: number
- rotation: number
- startAngle: number
- endAngle: number
- 可选counterclockwise: boolean
返回 void
继承自 CanvasPath.ellipse

fill

fill(fillRule?): void
参数
- 可选fillRule: CanvasFillRule
返回 void
继承自 CanvasDrawPath.fill
fill(path, fillRule?): void
参数
- path: Path2D
- 可选fillRule: CanvasFillRule
返回 void
继承自 CanvasDrawPath.fill

fillRect

fillRect(x, y, w, h): void
参数
- x: number
- y: number
- w: number
- h: number
返回 void
继承自 CanvasRect.fillRect

fillText

fillText(text, x, y, maxWidth?): void
参数
- text: string
- x: number
- y: number
- 可选maxWidth: number
返回 void
继承自 CanvasText.fillText

getContextAttributes

getContextAttributes(): CanvasRenderingContext2DSettings
返回 CanvasRenderingContext2DSettings

getImageData

getImageData(sx, sy, sw, sh, settings?): ImageData
参数
- sx: number
- sy: number
- sw: number
- sh: number
- 可选settings: ImageDataSettings
返回 ImageData
继承自 CanvasImageData.getImageData

getLineDash

getLineDash(): number[]
返回 number[]
继承自 CanvasPathDrawingStyles.getLineDash

getTransform

getTransform(): DOMMatrix
返回 DOMMatrix
继承自 CanvasTransform.getTransform

isPointInPath

isPointInPath(x, y, fillRule?): boolean
参数
- x: number
- y: number
- 可选fillRule: CanvasFillRule
返回 boolean
继承自 CanvasDrawPath.isPointInPath
isPointInPath(path, x, y, fillRule?): boolean
参数
- path: Path2D
- x: number
- y: number
- 可选fillRule: CanvasFillRule
返回 boolean
继承自 CanvasDrawPath.isPointInPath

isPointInStroke

isPointInStroke(x, y): boolean
参数
- x: number
- y: number
返回 boolean
继承自 CanvasDrawPath.isPointInStroke
isPointInStroke(path, x, y): boolean
参数
- path: Path2D
- x: number
- y: number
返回 boolean
继承自 CanvasDrawPath.isPointInStroke

lineTo

lineTo(x, y): void
参数
- x: number
- y: number
返回 void
继承自 CanvasPath.lineTo

measureText

measureText(text): TextMetrics
参数
- text: string
返回 TextMetrics
继承自 CanvasText.measureText

moveTo

moveTo(x, y): void
参数
- x: number
- y: number
返回 void
继承自 CanvasPath.moveTo

putImageData

putImageData(imagedata, dx, dy): void
参数
- imagedata: ImageData
- dx: number
- dy: number
返回 void
继承自 CanvasImageData.putImageData
putImageData(imagedata, dx, dy, dirtyX, dirtyY, dirtyWidth, dirtyHeight): void
参数
- imagedata: ImageData
- dx: number
- dy: number
- dirtyX: number
- dirtyY: number
- dirtyWidth: number
- dirtyHeight: number
返回 void
继承自 CanvasImageData.putImageData

quadraticCurveTo

quadraticCurveTo(cpx, cpy, x, y): void
参数
- cpx: number
- cpy: number
- x: number
- y: number
返回 void
继承自 CanvasPath.quadraticCurveTo

rect

rect(x, y, w, h): void
参数
- x: number
- y: number
- w: number
- h: number
返回 void
继承自 CanvasPath.rect

resetTransform

resetTransform(): void
返回 void
继承自 CanvasTransform.resetTransform

restore

restore(): void
返回 void
继承自 CanvasState.restore

rotate

rotate(angle): void
参数
- angle: number
返回 void
继承自 CanvasTransform.rotate

roundRect

roundRect(x, y, w, h, radii?): void
参数
- x: number
- y: number
- w: number
- h: number
- 可选radii: number | DOMPointInit | (number | DOMPointInit)[]
返回 void
继承自 CanvasPath.roundRect

save

save(): void
返回 void
继承自 CanvasState.save

scale

scale(x, y): void
参数
- x: number
- y: number
返回 void
继承自 CanvasTransform.scale

setLineDash

setLineDash(segments): void
参数
- segments: number[]
返回 void
继承自 CanvasPathDrawingStyles.setLineDash

setTransform

setTransform(a, b, c, d, e, f): void
参数
- a: number
- b: number
- c: number
- d: number
- e: number
- f: number
返回 void
继承自 CanvasTransform.setTransform
setTransform(transform?): void
参数
- 可选transform: DOMMatrix2DInit
返回 void
继承自 CanvasTransform.setTransform

stroke

stroke(): void
返回 void
继承自 CanvasDrawPath.stroke
stroke(path): void
参数
- path: Path2D
返回 void
继承自 CanvasDrawPath.stroke

strokeRect

strokeRect(x, y, w, h): void
参数
- x: number
- y: number
- w: number
- h: number
返回 void
继承自 CanvasRect.strokeRect

strokeText

strokeText(text, x, y, maxWidth?): void
参数
- text: string
- x: number
- y: number
- 可选maxWidth: number
返回 void
继承自 CanvasText.strokeText

transform

transform(a, b, c, d, e, f): void
参数
- a: number
- b: number
- c: number
- d: number
- e: number
- f: number
返回 void
继承自 CanvasTransform.transform

translate

translate(x, y): void
参数
- x: number
- y: number
返回 void
继承自 CanvasTransform.translate

接口 CanvasRenderingContext2D

层级 (查看完整内容)

索引

属性

方法

属性

只读canvas

direction

fillStyle

filter

font

fontKerning

globalAlpha

globalCompositeOperation

imageSmoothingEnabled

imageSmoothingQuality

lineCap

lineDashOffset

lineJoin

lineWidth

miterLimit

shadowBlur

shadowColor

shadowOffsetX

shadowOffsetY

strokeStyle

textAlign

textBaseline

方法

arc

参数

返回 void

arcTo

参数

返回 void

beginPath

返回 void

bezierCurveTo

参数

返回 void

clearRect

参数

返回 void

clip

参数

返回 void

参数

返回 void

closePath

返回 void

createConicGradient

参数

返回 CanvasGradient

createImageData

参数

返回 ImageData

参数

返回 ImageData

createLinearGradient

参数

返回 CanvasGradient

createPattern

参数

返回 null | CanvasPattern

createRadialGradient

参数

返回 CanvasGradient

drawFocusIfNeeded

参数

返回 void

参数

返回 void

drawImage

参数

返回 void

参数

返回 void

参数

返回 void

ellipse

`只读`canvas