8.canvas

canvas

1.概念

Canvas是H5新增的一个标签, 我们可以通过JS在这个标签上绘制各种图案，Canvas 拥有多种绘制路径、矩形、圆形、字符以及图片的方法。

2.使用

    // 通过js代码拿到canvas标签
    let oCanvas = document.querySelector("canvas");
    
    //从canvas标签中获取到绘图工具
    let oCtx = oCanvas.getContext("2d");
    
    //通过绘图工具在canvas标签上绘制图形
    //设置路径的起点
    oCtx.moveTo(50, 50);
    
    //设置路径的终点
    oCtx.lineTo(200, 50);
    
    //告诉canvas将这些点连接起来
    oCtx.stroke();

3.线条相关属性

1. lineWidth: 线条宽度
2. strokeStyle: 线条颜色
3. lineCap: 线末端类型：(butt默认)、round、square
   
   

4.注意点

1. canvas有默认的宽度和高度
   默认宽300px, 高150px

2. 不能通过CSS设置画布的宽高，通过CSS设置画布宽高会在默认宽高的基础上拉伸，如果需要设置canvas宽高请通过元素行内属性width和height设置

3. 通过canvas绘制的线条默认宽度是1px, 颜色是纯黑色
   但是由于默认情况下canvas会将线条的中心点和像素的底部对齐，所以会导致显示效果是2px和非纯黑色问题
   
   

5.绘制多根线条

1. 多根线条注意点
   如果是同一个路径, 那么路径样式会被重用(第二次绘制会复用第一次的样式)
   如果是同一个路径, 那么后设置的路径样式会覆盖先设置的路径样式

2. 给每根线条单独设置路径样式：每根线条都开启一个新的路径即可-----beginPath()
   beginPath()：自动创建从当前点回到起始点的路径
   lineJoin：设置相交线的拐点样式 miter(默认)、round、bevel

  let oCanvas = document.querySelector("canvas");
    let oCtx = oCanvas.getContext("2d");
    oCtx.moveTo(50, 50);
    oCtx.lineTo(200, 50);
    oCtx.lineWidth = 20;
    oCtx.strokeStyle = "blue";
    oCtx.stroke();

    oCtx.beginPath(); // 重新开启一个路径
    oCtx.moveTo(50, 100);
    oCtx.lineTo(200, 100);
    oCtx.lineWidth = 10; // 重新设置当前路径样式
    oCtx.strokeStyle = "red";
    oCtx.stroke();

---

绘制简单图形闭合问题

 // 注意点: 默认情况下不会自动从最后一个点连接到起点
 // 注意点: 如果通过lineTo来闭合图形, 那么是不能很好的闭合
    let oCanvas = document.querySelector("canvas");
    let oCtx = oCanvas.getContext("2d");
    oCtx.moveTo(50,50);
    oCtx.lineTo(50,300);
    oCtx.lineTo(300,300);
    oCtx.lineTo(300,50);
    oCtx.lineWidth = 30;
    oCtx.strokeStyle = "pink";
    oCtx.lineJoin = "round";
    oCtx.closePath();
   oCtx.fillStyle="#7B69CF"
    oCtx.fill();
    oCtx.stroke();
    //效果图如下

6.图形填充

1. 只要没有手动开启新的路径, 那么使用的都是默认路径
   如果都是默认路径, 那么设置的样式在同一个路径中都是有效的

2. 对于同一路径,在填充的时候回遵循非零环绕规则
   从当前的区域拉出一条直线, 遇到顺时针相交的线就+1, 遇到逆时针相交的线就-1，最终计算的结果如何是0就不填充, 如果不是0就填充
   说明：此时里面的矩形和外面的矩形都被填充了
   
   说明：此时里面的矩形未被填充，外面的矩形被填充
   
   

7.虚线

1. setLineDash：用来描述虚线排列方式
2. getLineDash：获取虚线的排列方式 获取的是不重复的那一段的排列方式
3. lineDashOffset： 设置虚线的偏移位

  // oCtx.setLineDash([5, 20]);
    oCtx.setLineDash([5, 10, 20]);
    console.log(oCtx.getLineDash());
    oCtx.lineDashOffset = -50;
    oCtx.stroke();
    //结果如下图

8.矩形

rect：绘制矩形（接收四个参数）
fillRect：填充矩形（接收四个参数）
clearRect：清空矩形（接收四个参数，一般用于清空画布）

1. 第一个参数: x的坐标
2. 第二个参数: y的坐标
3. 第三个参数: 矩形的宽度
4. 第四个参数: 矩形的高度

    oCtx.fillStyle = "blue";
    oCtx.fillRect(150, 150, 100, 100);
    let canvasWidth = oCtx.canvas.width;
    let canvasHeight = oCtx.canvas.height;
    oCtx.clearRect(0, 0, canvasWidth, canvasHeight);

9.渐变色

1.渐变

1. createLinearGradient：线性渐变
   接收四个参数：x0,y0, x1,y1 -->确定渐变的方向和渐变的范围

2. createRadialGradient：放射状渐变
   接收五个参数：x0,y0, r,x1,y1 -->确定渐变的方向和渐变的范围

3. addColorStop：添加设置渐变颜色与渐变范围
   接收两个参数：第一个参数是一个百分比 0~1
                            第二个参数是一个颜色

2.设置图形渐变背景颜色步骤

1. 通过绘图工具创建渐变背景颜色（创建渐变方案）
2. 指定渐变的范围
3. 将渐变背景颜色设置给对应的图形

    let linearGradient = oCtx.createLinearGradient(100, 100, 300,300);
    /*
    第一个参数是一个百分比 0~1
    第二个参数是一个颜色
    * */
    linearGradient.addColorStop(0, "blue");
    linearGradient.addColorStop(0.5, "purple");
    linearGradient.addColorStop(1, "pink");
    oCtx.fillStyle = linearGradient;
    oCtx.fillRect(100, 100, 200, 200);
    //结果如下图

10.弧线

1.arc(x, y, radius, startAngle, endAngle, Boolean);

1. x, y: 确定圆心
2. radius: 确定半径
3. startAngle: 确定开始的弧度
4. endAngle: 确定结束的弧度
5. Boolean: 默认是false, false就是顺时针绘制, true就是逆时针绘制

    oCtx.arc(100, 100, 100, 0, Math.PI * 2);
    oCtx.stroke();

11.绘制文字

1.绘制文字

1. strokeText：空心
2. fillText：实心
   接收三个参数：文字 x y (x、y为起始位置)
   注意：绘制文字的时候, 是以文字的左下角作为参考点进行绘制，但是矩形等是以左上角作为参考点。

2.相关属性

1. font：设置文字的大小和样式
2. textBaseline：设置文字垂直方向的对齐方式（取值：bottom/top/middle）
   注意：在对齐的时候是以绘制文字的y作为参考点进行对齐的
3. textAlign：设置文字水平方向的对齐方式 （取值：start/end/center）
   注意：在对齐的时候是以绘制文字的x作为参考点进行对齐的
4. font：设置文字的大小和样式

// 4.绘制文字
    let str = "仙女";
    oCtx.font = "50px 微软雅黑";
    oCtx.textBaseline = "middle";
    oCtx.textAlign = "center";
    oCtx.fillText(str, canvasWidth/2, canvasHeight/2);

12.绘制图片

drawImage：绘制图片‘

1. 三个参数
   第一个参数就是需要绘制的图片
   后面的两个参数是指定图片从什么位置开始绘制
2. 五个参数
   第一个参数就是需要绘制的图片
   后面的两个参数是指定图片从什么位置开始绘制
   最后的两个参数是指定图片需要拉伸到多大
3. 九个参数
   第一个参数就是需要绘制的图片
   第2~3个参数指定图片上定位的位置
   第4~5个参数指定从定位的位置开始截取多大的图片
   第6~7个参数指定图片从什么位置开始绘制
   最后的两个参数是指定图片需要拉伸到多大

oCtx.drawImage(oImg, 50, 50, 100, 100, 100, 100, 100, 100);

13.形变

1. translate：平移
2. rotate：旋转
3. scale：缩放

注意：在canvas中所有的形变属性操作的都是坐标系, 而不是图形

oCtx.translate(100, 100);

oCtx.rotate(Math.PI/6);

oCtx.scale(0.5, 1);