canvas 学习记录

什么是canvas
html5的canvas元素使用javascript在网页上绘制图像
画布是一个矩形区域，可以控制其每一像素，canvas拥有多种绘制路径，矩形，圆形，字符以及添加图像的方法

创建canvas
向html5页面添加canvas元素，规定元素的宽高及 id
<canvas id="myCanvas" width="200" height="100"></canvas>

使用canvas绘制线条
第一步：获取元素
 var myCanvas = document.querySelector('canvas');
第二步:获取绘图工具
var ctx = myCanvas.getContext('2d');
第三步：设置绘图的起始位置
ctx.moveTo(100,100);
第四步：绘制路径
ctx.lineTo(300,100);
第五步：描边
ctx.stroke();

canvas的基本使用
1.路径的绘制    stroke() 描边     fill()  填充
2.开启和关闭路径  beginPath（）      closePath（）
3.填充规则   非零环绕

设置样式：
1.画笔的状态
 lineWidth   线宽   默认1px    但是在图中因为是中心点绘制，会分成两个0.5px，在不饱和的情况下，自动填充，所以会呈现为2px
 lineCap  线末端的状态    round   square
 lineJoin  相交线的拐点   round   bevel
 strokeStyle  线的颜色
 fillStyle   填充颜色
 setLineDash（[10,15]）    设置虚线（数组是虚线的排列方式）
 getLineDash（）    获取虚线的宽度集合
 lineDashOffset  设置虚线的偏移量（负值向右偏移，正值向左偏移）

例子：绘制一条虚线
ctx.moveTo(100,100.5);
ctx.lineT0(300,100.5);
ctx.setLineDash([10,20]);
console.log(ctx.getLineDash());
ctx.lineDashOffset = 120;
ctx.stroke();

canvas绘制矩形
rect（x，y，w，h）  没有独立路径（需要手动绘制路径）
strokeRect（x,y,w,h）  有独立的路径，不影响别的绘制
fillRect（x,y,w,h）   有独立的路径，不影响别的绘制
clearRect（x,y,w,h）    擦除矩形的区域

圆弧绘制
什么是弧度：长度的描述单位，一个园有2PI个弧度，一个角度PI/180的弧度
arc（x，y，r，startAngle，endAngle，true/false）；
参数： x：圆心的横坐标      y:圆心的纵坐标      r：园的半径
startAngle：开始的角度           endAngle：结束的角度       true/false：绘制的方式  true（逆时针）  false（默认，顺时针）

绘制文本
ctx.font = 'MicrosoftYaHei';   设置字体
strokeText（）    绘制字体的路径
fillText（text，x，y，maxWidth）；     text：要绘制的文本   x，y文本绘制的坐标（左下角）   maxWidth：文本的最大宽度
ctx.textAlign  文本水平对齐方式，相对绘制的坐标来看    left/center/right
ctx.textBaseline  设置基线   （垂直对齐方式）  top/middle/bottom
measureText（）  获取文本宽度

绘制图片
drawImage（img，x，y）   图片对象（img/canvas/video）  图片绘制的坐标x，y
drawImage（img，x，y，w，h）  图片对象（img/canvas/video） 图片绘制的坐标x，y  图片的尺寸w，h  （图片是缩放，不是截取）
drawImage(img ,x,y,w,h,x1,y1,w1,h1)
图片对象（img/canvas/video） x,y,w,h 是相对于图片的，从x，y开始截取，截取w宽h高的矩形   x1,y1,w1,h1相对画布而言，图中绘制的点x，y，和绘制的大小w1，h1


坐标变换
平移： 移动画布的原点
translate（x，y）   移动目标点的坐标
缩放
scale（x，y）  宽高的缩放比例
旋转
rotate（angle）  旋转的角度（默认原点是画布的左上角，可以通过平移来改变坐标原点）

转载于:https://my.oschina.net/u/4157959/blog/3073079