html5、canvas核型技术阅读（2）

2.1 坐标系统

左上角为原点，x坐标向右方增长、y坐标向下方延伸。但坐标系不固定，可以评议、旋转、缩放以及自定义变换。

2.2 canvas绘制模型

//todo一会来补 阴影效果会多出几步,什么是阴影效果?

2.3 矩形绘制

clearRect  strokeRect fillRect 这三个方法都接受四个参数,x、y、w与h，注意某些绘图系统中绘制矩形四个参数最后两个可能表示结束点坐标，而canvas中w与h为矩形款与高

2.4 颜色与透明度

通过strokeStyle设置strokeRect边界颜色，通过fillStyle属性设置fillRect颜色

具体可设置颜色列表见https://drafts.csswg.org/css-color-3/

(ps不叫strokeColor与fillColor原因是他们还可以用渐变色，叫strokeColor不太合适）

2.5 渐变色与图案

2.5.1渐变色

使用strokeStyle或者fillStyle设置渐变色与图案

gradient = content.createLinearGradient(0,0,canvas.width,0);

gradient.addColorStop(0,'blue')

gradient.addColorStop(0.25,'white')

...

context.fillStyle = gradien

以上方法创建从左至右的渐变色

此外还有createRadialGradient用于创建放射渐变

2.5.2图案

context.createPattern(image,repeatString)

repeatString 可为repeat、repeat-x、repeat-y、no-repeat四个

2.6阴影

通过修改shadowColor shadowOffsetX shadowOffsetY shadowBlur四个属性指定阴影效果

2.7 路径、描边与填充

基于路径的绘图，先定义路径，然后进行描边或填充。主要就是使用context.beginPath()然后使用绘制路径方法context.rect 或者context.arc等进行绘制，如果是闭合需要调用context.closePath()

注意代码

context.beginPath()
context.rect(0,0,50,50)
context.stroke()

context.beginPath()改行添加与否绘制图形都相同，但是无此句，会导致第一个矩形被绘制两次

context.rect(20,20,15,15)
context.stroke()

填充规则——非零环绕规则：从区域内画一条足够长的线，使得线在终点完全落在路径范围之外，如果与路径顺时针相交，计数加一，与逆时针相交，计数减一，若最终值为0，则不填充，其余都填充。

2.8 线段

moveTo与lineTo

lineWidth线条宽度

画虚线有个写法很是骚气

for(var i=0;i<numDashes;++i){

        context[i%2==0?'moveTo':'lineTo'](x1+(deltaX/numDashed)*i,y1+(deltaY/numDashes)*i)

}

就算我知道context.moveTo或者context.lineTo，也想不到能直接再这之后加。

线段端点属性lineCap 有butt、round以及square可选

线段连接点属性lineJoin

此外miterLimit可能影响连接方式

2.9 圆弧与圆形的绘制

arc与arcTo

arc六个参数x,y,radius,startAngle,endAngle,counterClockwise 其他都比较好理解最后一个是方向，默认值为false，顺时针

arcTo五个参数，x1,y1,x2,y2,radius，该方法以指定半径绘制圆弧，并且该圆弧与当前点到点（x1,y1）连线相切，与当前点到（x2,y2）也相切。

2.10 贝塞尔曲线

二次方贝塞尔曲线quadraticCurveTo

三次方贝塞尔曲线bezierCurveTo

2.11 多边形绘制

这里开始,考验数学功底了,特别是几何数学。

canvas绘图模式为立即绘图模式，如果需要保存绘制步骤，则需要手动存储

2.12 高级路径操作

pointInPath方法判断某个点在当前路径中。

scrollPathIntoView 让网页自行滚动，是当前路径所对应元素显示在视窗中（未必被支持）

2.13 坐标变换

canvas坐标原点为左上角。使用translate平移坐标原点，rotate旋转坐标系，scale缩放坐标系

transform与setTransform也可用于坐标变换