[H5]CanvasRanderingContext2D整理
2016-10-18 本文已影响21人
Bill_Wang
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) 验证指定点是否在一个画笔轨迹内。
