Canvas中一些常用的属性

canvas是我们在日常中比较常用的一个工具，但是它的属性又特别多，今天小编我把一些日常中经常用到的属性总结了一些，方便水友们翻阅.........

1. ctx.beginPath();
   新开始一条路径，绘制方法被指向新路径
2. ctx.moveTo(x, y);
   描述起点坐标
3. ctx.lineTo(x, y);
   描述终点坐标
4. ctx.closePath();
   闭合当前路径，让绘制命令重新指向上下文
5. ctx.fill();
   通过填充路径的内容区域生成实心图形
6. ctx.stroke();
   通过线条来绘制图像轮廓
7. ctx.fillStyle();
   填充的颜色
8. ctx.strokeStyle();
   描边的颜色
9. ctx.fillText(text, x, y [, maxWidth]);
   • 绘制填充文本
   • text文本
   • x,y指定的坐标
   • maxWidth最大宽度，可选
10. ctx.strokeText(text, x, y [, maxWidth]);
    • 绘制文本边框
    • text文本
    • x,y指定坐标
    • maxWidth最大宽度，可选
11. ctx.textAlign(文本对齐选项): start|end|left|right|center
12. ctx.textBaseline(基线对齐选项)：top|hanging|middle|alphabetic|ideographic|bottom
13. ctx.fillRect(x,y,width,height);
    • 参数同上，绘制填充矩形
14. ctx.strokeRect(x, y. width, height);
    • 参数同上，绘制边框矩形
15. ctx.rect(x, y, width, height);
    • 绘制矩形x,y为绘制的起点坐标，width和height为要绘制矩形的宽高，无需加px
    • 需要配和stroke绘制带边框的矩形，或者fill绘制实心矩形
16. ctx.font

• 文本样式
  • 和css设置字体相似，复合设置
  • 例如：context.font='100px sans-serif';

17. ctx.lineWidth
    线条宽度，以像素计算，没有px
18. ctx.arc(x,y,r,sangle,eangle,counterclockwise);
    • 圆弧
    • x,y为绘制圆的圆心坐标
    • r为圆的半径
    • sangle,eangle为圆的起始角度和结束角度
    • counterclockwise，可选参数，表示绘制圆是顺时针还是逆时针，true为逆时针
19. ctx. arcTo(x1,y1,x2,y2,r);
    • 画圆角，一般两个直线相交的地方，用此方法绘制成圆弧，x1,y1指圆弧开始的x坐标和y坐标，x2,y2指圆弧结束的x和y坐标，r指半径
20. ctx.save();
    保存状态，保存在栈中，类似于数组的push
21. ctx.restore();
    恢复状态，类似于数组的pop
22. ctx.clip();
    裁剪路径
    • 把一个路径之外的内容进行裁剪，只保留路径本身内部的内容
23. ctx.drawImage();
    绘制图片
    • drawImage(imgElement,x,y,width,height)
    • x,y绘制图片的起始坐标
    • imgElement 要绘制的图片元素,或者为一个canvas的引用
    • width,height,设置图片的宽高
24. ctx.clearRect(x,y,width,height);
    • 清除指定区域矩形,会留下一块白色矩形区域
25. ctx.shadowBlur

• 阴影模糊级别

26. ctx.shadowColor
    阴影颜色
27. ctx.shadowOffsetX

• 阴影水平偏移量

28. ctx.shadowOffsetY

• 阴影垂直偏移量

29. ctx.isPonintInPath
    用来检测是否在路径内
    isPointInPath()方法
    定义与用法： isPointInPath()方法返回true，如果给定的点的坐标位于路径之内的话（包括路径的边）,否则返回 false。
    语法： context.isPointInPath(x,y);//其中x,y分别是给定点的横、纵坐标
    isPointInStroke()
    是 Canvas 2D API 用于检测某点是否在路径的描边线上的方法。返回值是一个布尔值，当这个点在路径的描边线上，则返回true，否则返回false。

30. ctx. translate(x, y);

    • 移动原点
    • 将一个坐标原点向x,y正方向移动，如果坐标原点不在原来的位置，则以新的位置加上要移动的位置

31. ctx.rotate(x, y);

    • 旋转
    • 凡是牵扯到度数，都用公式deg乘以Math.PI/180来计算

32. ctx.scale(x, y);

    • 缩放x轴和y轴分别设置缩放

33. ctx.globalAlpha()
    全局的透明度

34. ctx.lineCap

    • 设置线条两端结束位置的形状
    • butt默认
    • round圆形帽
    • square正方形