HTML5 Canvas
Canvas元素
| 类型 | 名称 |
|---|---|
| 属性 | width |
| height | |
| 方法 | getContext |
| toDataURL | |
| toBlob | |
| transferControlToOffscreen |
CanvasRenderingContext2D
| 分类 | 类型 | 名称 |
|---|---|---|
| N/A | 属性 | canvas |
| 方法 | getContextAttributes | |
| CanvasState | 方法 | save |
| restore | ||
| CanvasTransform | 方法 | scale |
| rotate | ||
| translate | ||
| transform | ||
| getTransform | ||
| setTransform | ||
| resetTransform | ||
| CanvasCompositing | 属性 | globalAlpha |
| globalCompsiteOperation | ||
| CanvasImageSmoothing | 属性 | imageSmoothingEnabled |
| imageSmoothingQuality | ||
| CanvasShadowStyles | 属性 | shadowOffsetX |
| shadowOffsetY | ||
| shadowBlur | ||
| shadowColor | ||
| CanvasFilters | 属性 | filter |
| CanvasUserInterface | 方法 | drawFocusIfNeeded |
| scrollPathIntoView | ||
| CanvasDrawImage | 方法 | drawImage |
| ImageData | 属性 | width |
| height | ||
| data | ||
| CanvasImageData | 方法 | createImageData |
| getImageData | ||
| putImageData | ||
| TextMetrics | 属性 | width |
| actualBoundingBoxLeft | ||
| actualBoundingBoxRight | ||
| fontBoundingBoxAscent | ||
| fontBoundingBoxDescent | ||
| actualBoundingBoxAscent | ||
| actualBoundingBoxDescent | ||
| emHeightAscent | ||
| emHeightDescent | ||
| hangingBaseline | ||
| alphabeticBaseline | ||
| ideographicBaseline | ||
| CanvasTextDrawingStyles | 属性 | font |
| textAlign | ||
| textBaseline | ||
| direction | ||
| CanvasText | 方法 | fillText |
| strokeText | ||
| measureText | ||
| CanvasPathDrawingStyles | 属性 | lineWidth |
| lineCap | ||
| lineJoin | ||
| miterLimit | ||
| lineDashOffset | ||
| 方法 | setLineDash | |
| getLineDash | ||
| CanvasGradient | 方法 | addColorStop |
| CanvasFillStrokeStyles | 属性 | strokeStyle |
| fillStyle | ||
| 方法 | createLinearGradient | |
| createRadialGradient | ||
| createPattern | ||
| CanvasRect | 方法 | clearRect |
| fillRect | ||
| strokeRect | ||
| CanvasDrawPath | 方法 | beginPath |
| fill | ||
| stroke | ||
| clip | ||
| isPointInPath | ||
| isPointInStroke | ||
| CanvasPath | 方法 | closePath |
| moveTo | ||
| lineTo | ||
| quadraticCurveTo | ||
| bezierCurveTo | ||
| arcTo | ||
| rect | ||
| arc | ||
| ellipse | ||
| Path2D | 方法 | addPath |
| CanvasPath中的所有方法 |
Path
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(10, 0);
ctx.stroke();
ctx.fill();
ctx.closePath();
坐标轴
方向
Canvas的坐标轴的原点在Canvas的左上角，X轴的值往右而增加，Y轴的值往下而增加。
坐标轴的反转
ctx.scale(1, -1)虽能反转Y轴，但同时也会将文本反转。因此这种简单的方式不能用于需要绘制文本的地方。
映射坐标值
需将Y轴最大值设为100，在上面画出高度为30， 50， 80的柱状图。此时需要将100映射到Y轴的高度上，必要时还需进行轴向反转。那么，30应对应于Y轴上多少的位置？
先考虑X轴。先将整个轴长度除以最大份数，上例是100，得出每份的实际长度，再乘以所需的长度就行。
var canvasWidth = 500; var maxValue = 100; var mappingValue = 30; var canvasValue = canvasWidth / maxValue * mappingValue = 500 / 100 * 30;
如需考虑留边，则：
var CANVAS_PADDING = 20; var canvasWidth = 500; var maxValue = 100; var mappingValue = 30; var canvasValue = (canvasWidth - CANVAS_PADDING * 2) / maxValue * mappingValue + CANVAS_PADDING;
而对于Y轴来讲，如果需要反转轴向朝上：
var canvasValue = canvas.height - (canvas.height - CANVAS_PADDING * 2) / yMaxValue * mappingValue - CANVAS_PADDING;
于是，分别转换x及y轴坐标的两个函数：
function convertX(x) {
return (canvas.width - CANVAS_PADDING * 2) / xMaxValue * x + CANVAS_PADDING;
}
function convertY(y) {
return canvas.height - (canvas.height - CANVAS_PADDING * 2) / yMaxValue * y - CANVAS_PADDING;
}
确定起点时，也可直接使用转换函数的值作为参数。
ctx.moveTo(convertX(30), convertY(0)); ctx.lineTo(convertX(30), convertY(100));
每一步都要进行坐标转换。从快捷编写代码的角度来看，有何方法可以更直观的吗？能否使用Prototype进行函数注入？
CanvasRenderingContext2D.prototype.nMoveTo = function(x, y) {
ctx.moveTo(convertX(x), convertY(y));
};
CanvasRenderingContext2D.prototype.nLineTo = function(x, y) {
ctx.lineTo(convertX(x), convertY(y));
};
ctx.nMoveTo(0, 0);
ctx.nLineTo(50, 50);
相关数学知识
弧度与角度的互换
radian = π / 180 * degree = Math.PI / 180 * degree degree = 180 / π * radian = 180 / Math.PI * radian