canvas是我们在日常中比较常用的一个工具，但是它的属性又特别多，今天小编我把一些日常中经常用到的属性总结了一些，方便水友们翻阅.........
- ctx.beginPath();
新开始一条路径，绘制方法被指向新路径 - ctx.moveTo(x, y);
描述起点坐标 - ctx.lineTo(x, y);
描述终点坐标 - ctx.closePath();
闭合当前路径，让绘制命令重新指向上下文 - ctx.fill();
通过填充路径的内容区域生成实心图形 - ctx.stroke();
通过线条来绘制图像轮廓 - ctx.fillStyle();
填充的颜色 - ctx.strokeStyle();
描边的颜色 - ctx.fillText(text, x, y [, maxWidth]);
- 绘制填充文本
- text文本
- x,y指定的坐标
- maxWidth最大宽度，可选
- ctx.strokeText(text, x, y [, maxWidth]);
- 绘制文本边框
- text文本
- x,y指定坐标
- maxWidth最大宽度，可选
- ctx.textAlign(文本对齐选项): start|end|left|right|center
- ctx.textBaseline(基线对齐选项)：top|hanging|middle|alphabetic|ideographic|bottom
- ctx.fillRect(x,y,width,height);
- 参数同上，绘制填充矩形
- ctx.strokeRect(x, y. width, height);
- 参数同上，绘制边框矩形
- ctx.rect(x, y, width, height);
- 绘制矩形x,y为绘制的起点坐标，width和height为要绘制矩形的宽高，无需加px
- 需要配和stroke绘制带边框的矩形，或者fill绘制实心矩形
- ctx.font
- 文本样式
- 和css设置字体相似，复合设置
- 例如：context.font='100px sans-serif';
- ctx.lineWidth
线条宽度，以像素计算，没有px - ctx.arc(x,y,r,sangle,eangle,counterclockwise);
- 圆弧
- x,y为绘制圆的圆心坐标
- r为圆的半径
- sangle,eangle为圆的起始角度和结束角度
- counterclockwise，可选参数，表示绘制圆是顺时针还是逆时针，true为逆时针
- ctx. arcTo(x1,y1,x2,y2,r);
- 画圆角，一般两个直线相交的地方，用此方法绘制成圆弧，x1,y1指圆弧开始的x坐标和y坐标，x2,y2指圆弧结束的x和y坐标，r指半径
- ctx.save();
保存状态，保存在栈中，类似于数组的push - ctx.restore();
恢复状态，类似于数组的pop - ctx.clip();
裁剪路径- 把一个路径之外的内容进行裁剪，只保留路径本身内部的内容
- ctx.drawImage();
绘制图片- drawImage(imgElement,x,y,width,height)
- x,y绘制图片的起始坐标
- imgElement 要绘制的图片元素,或者为一个canvas的引用
- width,height,设置图片的宽高
- ctx.clearRect(x,y,width,height);
- 清除指定区域矩形,会留下一块白色矩形区域
- ctx.shadowBlur
- 阴影模糊级别
- ctx.shadowColor
阴影颜色 - ctx.shadowOffsetX
- 阴影水平偏移量
- ctx.shadowOffsetY
- 阴影垂直偏移量
ctx.isPonintInPath
用来检测是否在路径内
isPointInPath()方法
定义与用法： isPointInPath()方法返回true，如果给定的点的坐标位于路径之内的话（包括路径的边）,否则返回 false。
语法： context.isPointInPath(x,y);//其中x,y分别是给定点的横、纵坐标
isPointInStroke()
是 Canvas 2D API 用于检测某点是否在路径的描边线上的方法。返回值是一个布尔值，当这个点在路径的描边线上，则返回true，否则返回false。-
ctx. translate(x, y);
- 移动原点
- 将一个坐标原点向x,y正方向移动，如果坐标原点不在原来的位置，则以新的位置加上要移动的位置
-
ctx.rotate(x, y);
- 旋转
- 凡是牵扯到度数，都用公式deg乘以Math.PI/180来计算
-
ctx.scale(x, y);
- 缩放x轴和y轴分别设置缩放
ctx.globalAlpha()
全局的透明度-
ctx.lineCap
- 设置线条两端结束位置的形状
- butt默认
- round圆形帽
- square正方形
