canvas绘图基础

• 开始前的准备

<canvas id="myCanvas" width="800" height="800">
        当前浏览器不支持canvas，请更换浏览器
</canvas>
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext("2d");

• API

1. 路径Path:

开始路径：context.beginPath();
闭合路径（不必对称出现）：context.closePath();

2. 状态:

保存状态值：context.save();
返回原始状态值：context.restore();

3. 直线Line:

线色：context.strokeStyle = "#fd3/agba(0,255,255,0.5)";   
线宽：context.lineWidth = 3;
线接口：context.lineJoin = "miter/bevel/round"; context.lineCap = "round";
线接口=“miter”： context.miterLimit = 20;
移动落脚点：context.moveTo(x,y);
绘制路径：context.lineTo(x,y);
画线：context.stroke();

4. 弧线Arc:

圆弧：context.arc(centerx,centery,radius,startAngle,endAngle,anticlockwise=false)  //指定圆心
弧线：context.arcTo(x1,y1,x2,y2,radius)   //指定控制点和结束点
贝塞尔二次曲线：contect.quadraticCurveTo(x1,y1,x2,y2)   //指定控制点和结束点
贝塞尔三次曲线：contect.bezierCurveTo(x1,y1,x2,y2,x3,y3)   //指定两个控制点和结束点

5. 填充Fill:

填充色：context.fillStyle = "#000";
填充长方形（直接画出来）：context.fillRect(0,0,canvas.width,canvas.height);
填充：context.fill();
线性渐变： var grd = context.createLinearGradient(xstart,ystart,xend,yend);
grd.addColorStop(stop,color);
径向渐变： var grd = context.createRadialGradient(x0,y0,r0,x1,y1,r1);
图片: var backgroundImg = new Image();
backgroundImg.src = "";
backgroundImg.onload = function(){
var pattern = context.createPattern(img, repeat-style); //no-repeat/repeat-x/repeat-y/repeat
}

6. 变换：

位移：context.translate(x,y);
缩放：context.scale(x,y)   //(x缩放，y缩放)
变换矩阵：context.transform(1,0,0,1,x,y);   //(x缩放，y缩放)
旋转（弧度）：context.rotate(rot/180*Math.PI); 

7. 文字渲染：

字体字号：context.font = "20px sans-serif"  
font-style：normal/italic(斜体)/oblique(倾斜)
font-variant：normal/small-caps (英文小写变小型大写)
font-weight：normal400/lighter/bold700/bolder
font-size: 20px/2em/150%/xx-small/x-small/medium/large/x-large/xx-large
font-family: 多种字体备选、支持@font-face、web安全字体
打印文字：context.fillText("xxxxx",x,y)
文本水平对齐：context.textAlign = "left/center/right"
文本垂直对齐：context.textBaseline = "alphabetic(字母)/ideographic(方块字)/hanging(印度文)/top/middle/bottom"
文本度量：context.measureText(string).width

8. 阴影与透明：

阴影色：context.shadowColor = “grey”
位移值：context.shadowOffsetX = 20
context.shadowOffsetY
模糊度：context.shadowBlur  //0不模糊，数字越大越模糊
透明度：context.globalAlpha = 0.5
遮盖效果：context.globalCompositeOperation = "source-over/source-atop/source-in/source-our/destination-over/lighter(颜色叠加)/copy/xor(重叠挖空)"

9. 剪切：
   context.clip()

10. 路径方向：
    非零环绕原则
    首先，我们得给图形确定一条路径，只要“一笔画”并且“不走重复路线”就可以了。如图，标出的是其中的一种路径方向。我们先假定路径的正方向为1（其实为-1啥的也都可以，正负方向互为相反数，不是0就行），那么反方向就是其相反数-1。
    S3中引出的射线L3，与两条子路径相交，但是其中有一条的反方向，计数器+1-1，结果为0，在里面。没错，只要结果不为0，该射线所在的区域就在外面。