[H5]CanvasRanderingContext2D整理

CanvasRanderingContext2D接口用来在canvas元素上绘制矩形，文本，图片或其他对象。它为在<canvas>元素表面上绘图提供了2D渲染上下文

调用<canvas>元素的getContext()方法，加入"2d"作为参数可以获得这个接口的实例。

canvas = document.getElementById('mycanvas'); // in your HTML this element appears as <canvas id="mycanvas"></canvas>
var ctx = canvas.getContext('2d');

Rect

• clearRect(x,y,w,h) 清除矩形
• fillRect(x,y,w,h) 绘制实心矩形
• strokeRect(x,y,w,h) 绘制空心矩形

Text

• fillText(text,x,y) 绘制文字
• strokeRect(text,x,y)绘制空心文字
• measureText(text) 获取文字的textMetrics属性，可以用来获取文字宽度等属性

Path

• beginPath() 新建一个路径
• closePath() 闭合一个路劲，从当前终点向起点绘制一条直线
• moveTo(x,y) 把指针移到指定坐标
• lineTo(x,y) 从当前位置到指定位置绘制一条直线
• bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y) 通过2个控制点和一个终点位置绘制贝塞尔曲线
• quadraticCurveTo(cpx, cpy, x, y) 二次贝塞尔曲线，需要控制点和终点
• arc(x, y, radius, startAngle, endAngle, anticlockwise) 在指定坐标(x,y)绘制一个半径为r的从startAngle到endAngle的圆弧，绘制方向由anticlockwise决定(默认顺时针)
• arcTo(x1, y1, x2, y2, radius) 通过给定控制点和半径绘制圆弧，用直线连接前2个点
• ellipse(x, y, radiusX, radiusY, rotation, startAngle, endAngle, anticlockwise) 以为(x,y)我中心，以radiusX和radiusY为半径，起始于startAngle，结束于endAngle，方向由anticlockwise决定(默认顺时针)绘制一个椭圆
• rect(x,y,w,h) 在(x,y)绘制一个大小为(w,h)的矩形

Drawing paths

• fill() 填充方式
• stroke() 画笔方式
• drawFocusIfNeeded() 如果给定元素获得焦点，在当前路径上绘制焦点环绕
• clip() 所有在clip()绘制的图形都会出现在clipping path里
• isPointInPath(x,y) 验证指定点是否在当前路劲内
• isPointInStroke(x,y) 验证指定点是否在一个画笔轨迹内。

测试代码下载