03-Canvas

Canvas开篇

• Canvas是H5新增的一个标签,我们可以通过JS在这个标签上绘制各种图案
• Canvas拥有多种绘制路径,矩形,圆形,字符以及图片的方法
• Canvas基本使用
  • 在body中创建一个canvas标签
  • 通过js代码拿到canvas标签
  • 从canvas标签中获取到绘图工具
  • 通过绘图工具在Canvas上绘制图形
    • 设置路径的起点 xxx.moveTo(x,y);
    • 设置路径的终点 xxx.lineTo(x,y);
  • 告诉canvas将这些点连接起来 xxx.stroke();
• Canvas注意点
  • canvas有默认的宽度和高度: 默认宽度300px,高150px
  • 能通过CSS设置canvas的宽高: 通过CSS设置canvas宽高会在默认宽高的基础上拉伸,如果需要设置canvas宽高通过元素行内属性width和height设置
  • 线条默认宽度和颜色: 通过canvas绘制的线条默认宽度是1px,颜色是纯黑色,但是由于默认情况下canvas会将线条的中心点和像素的底部对齐,,所以会导致显示效果是2px和非纯黑色的问题

Canvas线条属性

• lineWidth: 线条宽度
• strokeStyle: 线条颜色
• lineCap: 线末端类型: butt(默认),round,square

绘制多根线条

• 如果是同一个路径,那么路径样式会被重用(第二次绘制会复用第一次的样式)
• 如果是同一个路径,那么后设置的路径样式会覆盖先设置的路径样式
• 如何给每根线条单独设置路径样式:每根线条都开启一个新的路径,然后设置新的样式即可

绘制简单图形

• 默认情况下不会自动从最后一个点连接到起点
• 如果通过lineTo来闭合图形,那么是不能很好的闭合
• closePath 自动创建从当前点回到起始点的路径
• lineJoin 设置相交线的拐点样式 miter(默认),round,bevel

填充图形(fill)

• 对于同一路径,在填充的时候会遵循非零环绕规则
• 从当前的区域拉出一条直线,遇到顺时针相交的线+1,遇到逆时针相交的线就-1
• 最终计算的结果如果是0就不填充,如果不是0就填充

绘制虚线

• setLineDash 用数组来描述你的排序方式的
• getLineDash 获取虚线的排序方式,获取的是不重复的那一段的排序方式
• lineDashOffset 设置虚线的偏移位

绘制矩形

• fillRect(填充矩形)
• clearRect(清除指定范围矩形)
• strokeRect(绘制矩形)
  • 第一个参数:x轴的位置
  • 第二个参数:y轴的位置
  • 第三个参数:矩形的宽度
  • 第四个参数:矩形的高度

Canvas渐变色

• 和普通的标签一样我们也可以给填充的图形设置线性渐变和径向渐变的背景颜色
• 设置图形渐变背景颜色步骤
  • 通过绘图工具创建渐变背景颜色
  • 指定渐变的范围
  • 将渐变背景颜色设置给对应的图形

绘制圆弧

• content.arc(x,y,radius,startAngle,endAngle,Boolean);
• x,y: 确定圆心
• radius: 确定半径
• startAngle: 确定开始的弧度
• endAngle: 确定结束的弧度
• Boolean: 默认是false,false就是顺时针绘制,true就是逆时针绘制

绘制文字

• strokeText绘制的文字是空心的,fillText绘制的文字是填充了的
  • 在绘制文字的时候,是以文字的左下角作为参考点进行绘制
• 通过font属性可以设置文字的大小和样式
• 通过textBaseline属性可以设置文字垂直方向的对齐方式
  • 在对齐的时候是以绘制文字的y作为参考点进行对齐的
• 通过textAlign属性可以设置文字水平方向的对齐方式
  • 在对齐的时候是以绘制文字的x作为参考点进行对齐的

绘制图片

• content.drawImage();
• 如果只有三个参数
  • 第一参数是需要绘制的图片
  • 后面两个参数是指定图片从什么位置开始绘制
• 如果只有五个参数
  • 第一参数是需要绘制的图片
  • 后面两个参数是指定图片从什么位置开始绘制
  • 最后的两个参数是指定图片需要拉伸到多大
• 如果有九个参数
  • 第一参数是需要绘制的图片
  • 最后的两个参数是指定图片需要拉伸到多大
  • 第6~7个参数是指定图片从什么位置开始绘制
  • 第2~3个参数指定图片上定位的位置
  • 第4~5个参数指定从定位的位置开始截取多大的图片

Canvas形变属性

• content.translate(x,y); 平移
• content.rotate(); 旋转
• content.scale(); 缩放
• 在canvas中所有的形变属性操作的都是坐标系,不是图形

Canvas图形交互

• 因为整个canvas是一个标签,所以只能通过监听鼠标在canvas上的位置来判断是否需要处理对应的图形
• isPointInPath方法如果开启了一个新的路径,那么判断的就是点是否在新的路径的图形中
• 也可以通过第三方框架来解决交互问题,诸如:zrender.js / Knova.js / three.js / egret.js / pixi.js等等