CanvasRenderingContext2D

2D繪圖上下文是建立在<canvas>元素上的，為了獲取到繪圖上下文，需要調用canvas dom 對象的getContext("2d")方法。

基本介紹

• 中文名：畫布二維渲染環境
• 外文名：CanvasRenderingContext2D

方法簡介

2D繪圖上下文是建立在<canvas>元素上的，為了獲取到繪圖上下文，需要調用canvas dom 對象的getContext("2d")方法。

var canvas = document.getElementById('tutorial'); var ctx = canvas.getContext('2d');

得到2D繪圖上下文後，你可以像下面一樣繪製：

ctx.fillStyle = "rgb(200,0,0)";   ctx.fillRect(10, 10, 55, 50);

通用方法

說明	方法
	voidarc(in float x, in float y, in float radius, in float startAngle, in float endAngle, in boolean anticlockwise可選);
	voidarcTo(in float x1, in float y1, in float x2, in float y2, in float radius);
	voidbeginPath();
	voidbezierCurveTo(in float cp1x, in float cp1y, in float cp2x, in float cp2y, in float x, in float y);
	voidclearRect(in float x, in float y, in float width, in float height);
	voidclip();
	voidclosePath();
	ImageDatacreateImageData(in float width, in float height); ImageDatacreateImageData(Imagedata imagedata);
	nsIDOMCanvasGradientcreateLinearGradient(in float x0, in float y0, in float x1, in float y1);
	nsIDOMCanvasPatterncreatePattern(in nsIDOMHTMLElement image, in DOMString repetition);
	nsIDOMCanvasGradientcreateRadialGradient(in float x0, in float y0, in float r0, in float x1, in float y1, in float r1);
	voiddrawImage(in nsIDOMElement image, in float a1, in float a2, in float a3可選, in float a4可選, in float a5可選, in float a6可選, in float a7可選, in float a8可選);
	booleandrawCustomFocusRing(Element element);
	voiddrawSystemFocusRing(Element element);
	voidfill();
填充矩形	voidfillRect(in float x, in float y, in float width, in float height);
填充文字	voidfillText(in DOMString text, in float x, in float y, in float maxWidth可選);
	ImageDatagetImageData(in float x, in float y, in float width, in float height);
	sequence <unrestricted double>getLineDash()
	booleanisPointInPath(in float x, in float y);
	booleanisPointInStroke(in float x, in float y);
	voidlineTo(in float x, in float y);
	nsIDOMTextMetricsmeasureText(in DOMString text);
	voidmoveTo(in float x, in float y);
	voidputImageData(in ImageData imagedata, in float dx, double dy, in float dirtyX可選, in float dirtyY可選, in float dirtyWidth可選, in float dirtyHeight可選);
	voidquadraticCurveTo(in float cpx, in float cpy, in float x, in float y);
	voidrect(in float x, in float y, in float width, in float height);
	voidrestore();
	voidrotate(in float angle);
	voidsave();
	voidscale(in float x, in float y);
	voidscrollPathIntoView();
	voidsetLineDash(in sequence <unrestricted double> segments);
	voidsetTransform(in float m11, in float m12, in float m21, in float m22, in float dx, in float dy);
	voidstroke();
	voidstrokeRect(in float x, in float y, in float w, in float h);
	voidstrokeText(in DOMString text, in float x, in float y, in float maxWidth可選);
	voidtransform(in float m11, in float m12, in float m21, in float m22, in float dx, in float dy);
	voidtranslate(in float x, in float y);