总结一些基础知识
1. 画一条直线
- moveTo设置起点，lineTo设置下一坐标
- lineCap属性 - 设置线段起始位置的样式，取值如下
butt:(default)默认值
round:圆头
square:方头
结果如下：
- lineJoin属性- 两条直线相交处的样式，可取值如下：
miter：(default)，尖角，miterLimit 默认值10,控制尖角的长度，只有设置miter时生效。
bevel：斜接
round: 圆角
示意图如下：
2. 画一个矩形
(1).直接使用连线的方式画出矩形。
(2).使用context.rect(x, y, width, height)规划路径，这里只规划路径，不会绘制。
context.fillRect(x, y, width, height), context.strokeRect(x, y, width, height)不但规划路径，还将矩形直接绘制出来。
fillStyle, strokeStyle 可取颜色值如下：
#ffffff 、#fff、
rgb(255, 255, 100)、rgba(100, 100, 100, 0.8)、
hsl(20, 62%, 28%)、 hsla(30, 82%, 45%, 0.6)、
red
3. 图形变换
- 位移：translate(x, y)
- 旋转：rotate(deg)
- 缩放：scale(sx, sy) , sx - x方向缩放倍数，sy - y方向缩放倍数。
- 变换矩阵
a c e a - 水平缩放(1) ; b - 水平倾斜(0)
b d f c - 垂直倾斜(0) ; d - 垂直缩放(1)
0 0 1 e - 水平位移(0); f - 垂直位移(0) - 设置变换矩阵：
transform(a, b, c, d, e, f)
setTransform(a, b, c, d, e, f) 设置变换后的默认值 - canvas状态的保存与恢复
context.save();
context.restore();
4. fillStyle - 线性渐变&径向渐变
- 线性渐变
//step1
var grd = context.createLinearGradient(xstart, ystart, xend, yend);
//step2
grd.addColorStop(stop, color);
- 径向渐变
//step1
var grd = context.createRadialGradient(x0, y0, r0, x1, y1, r1);
//step2
grd.addColorStop(stop, color);
5. createPattern
- createPattern(img, repeat-style)
repeat-style:no-repeat; repeat-x; repeat-y; repeat - createPattern(canvas, repeat-style)
- createPattern(video, repeat-style)
6.曲线绘制
-
圆或圆弧
context.arc(context, center, radius, startingAngle, endingAngle, anticlockwiae)
anticlockwiae = false 顺时针
-
arcTo
context.arcTo(x1, y1, x2, y2, radius)
-
贝赛尔曲线 Bezier
（1）QuadraticCurveTo(二次)
context.moveTo(x0, y0); //初始点
contextquadraticCurveTo(x1, y1, x2, y2)//控制点、结束点
（2）BezierCurveTo(三次)
context.moveTo(x0, y0);
context.bezierCurveTo(x1, y1, x2, y2, x3, y3);
function drawLand(cxt){
cxt.save();
cxt.beginPath();
cxt.moveTo(0, 600);
cxt.bezierCurveTo(540, 400, 660, 800, 1200, 600);
cxt.lineTo(1200, 800);
cxt.lineTo(0, 800);
cxt.closePath();
var lanStyle = cxt.createLinearGradient(0, 800, 0, 0);
lanStyle.addColorStop(0.0, "#030");
lanStyle.addColorStop(1.0, "#580");
cxt.fillStyle = lanStyle;
cxt.fill();
cxt.restore();
}
7.文字渲染基础
context.font = "bold 40px Arial";
context.fillText(String, x, y, [maxlen]);
context.StrokeText(String, x, y, [maclen])
-
font
默认值"20px sans-serif"
（1）font-style:
normal(default);
italic(斜体字);
oblique(倾斜字体)
（2）font-variant:
normal;
small-caps(以小型形式显示大写字母)
（3）font-weight:
lighter;
normal;
bold;
bolder;
100,200,300,400(normal),500,600,700(bold),800,900
（4）font-size:
20px;
2em;
150%;
（5）font-family:
设置多种字体备选；
支持@font-face
web安全字体
-
文本对齐
context.textAlign = left/center/right
cotext.textBaseline = top/middle/bottom (alphabetic拉丁/ideographic汉，日/hanging印)
-
文本度量
context.measureText(String).width
8. 阴影
context.shadowColor;
context.shadowOffsetX;//x位移值
context.shadowOffsetY;//y位移值
xontext.shadowBlur; //模糊值
9. global
- globalAlpha = 1(default) //使全局具有透明度
- glibalCompositeOperation//绘制的图像在重叠时产生的效果
"sourece-over" - 后绘制的图像在先绘制的图形上面
"destination-over" - 先绘制的图形在后悔值的上面
···········································································································································································
source-over
source-atop
source-in
source-out
···········································································································································································
destination-over
destination-atop
destination-in
destination-out
···········································································································································································
lighter
copy
xor
10. 剪辑区域
context.clip();
11. 剪纸效果
非零环绕原则
其他
- clearRect
context.clearRect(x, y, width, height) - isPointInPath
context.isPointInPath(x, y)
var x = event.clientX - canvas.getBoundingClientRect().left
var y = event.clientY - canvas.getBoundingClientRect().Right
兼容性
explorecanvas https://code.google.con/p/explorecanvas/
canvas 图形库：canvasplus/ArtisanJS/Rgraph