2D/3D视图变换、canvas画布

1，2D图形变换

图形变换主要通过transform css属性来达到图形的旋转、平移、和缩放

• 旋转 旋转中心(基准点)为中心点,deg是角度制单位 transform: rotate(45deg);
• 缩放 缩放中心(基准点)为中心点，一个值表示宽高等比例缩放，两个值分别表示宽和高。 transform: scale(0.5);
• 平移， transform: translate(-10px, 10px);
• 倾斜，两个值分别表示y轴和x轴的倾斜角度 transform: skew(30deg, 30deg)
• 改变基准点 transform-origin

先旋转再平移和先平移再旋转，最终结果不同的原因：图形旋转时，其坐标轴也同时发生旋转，所以先旋转再平移会沿着旋转后的轴向移动

div:nth-child(5){
            /* 5, 先向下平移300px再旋转45deg*/
            transform: translate(0px, 300px) rotate(45deg); 
        }
        div:nth-child(6){
            /* 6, 先旋转-45deg,再向下平移300px*/
            transform: rotate(-45deg) translate(0px, 300px); 
        }
  /* transform视图变换的基准点是中心点center */
        div{
            transform-origin: right top;
        }

2，3D图形变换

3d图形变换就是给父标签设置景深后，才会有旋转效果。

• prerspective 景深，相机/眼睛和拍摄物品间的距离，默认无穷大。景深要设置给舞台元素，也就是视图变换的父元素
• 给父标签设置景深后，视图变换的元素的子元素没有3D效果，原因是 景深只针对子标签有效果，子标签的子标签无效，此时可通过transform-style把3D效果向下传递给子标签即可

        main {
            width: 500px;
            height: 500px;
            border: 1px solid;
            margin: auto;
            /* perspective 景深,相机/眼睛和拍摄物品间的距离，默认无穷大 */
            /* 注意：景深要设置给舞台元素，指的就是视图变换的父元素 */
            perspective: 500px;
        }
        
        div {
            width: 300px;
            height: 300px;
            background-color: red;
            margin: 100px;
            transform: rotateX(0deg);
            transition: 1s;
            padding: 70px;
            box-sizing: border-box;
            /* 给父标签main设置景深后，div有3d效果，但是div的子标签section没有3D效果
            原因是 景深只针对子标签（div）有效果，子标签的子标签无效，
            此时可通过transform-style把3D效果向下传递给子标签即可
            */
            transform-style: preserve-3d;
        }

3,canvas画布

3.1 canvas基础语法

**canvas是行内块类型标签，样式类似于图片。**canvas是html5新增的一个标签，用于在网页上绘制图形。canvas标签需要使用js语法绘制图形。

3.1.1 实现canvas语法提示

        /** @type {HTMLCanvasElement}  */

3.1.2 js语法绘制图形步骤

• 首先找到canvas标签

• 使用canvas标签创建一个绘图对象，然后使用这个对象绘图

          var canvas = document.getElementById("canvas");
          var ctx = canvas.getContext("2d");
  

注意：

1，canvas绘制图形时，所有的坐标尺寸都不加单位，因为长度单位不是像素点px，单位是canvas内部的独立坐标系值，通过标签属性width和height设置，通过标签属性设置canvas的宽高不会拉伸变形

2，设置canvas的宽高不要使用css设置，会拉伸变形。通过设置标签属性设置宽高不会拉伸变形

3.1.3 绘制一个矩形

矩形包括线框矩形、填充矩形、清除矩形。

• 线框矩形：前两个参数是左上角坐标，后两个参数是宽高
• 填充矩形：实心矩形
• 清除矩形：清理矩形区域内的所有图形

        // 线框矩形,前两个参数是左上角组表，后两个参数是宽高
        ctx.strokeRect(30, 30, 100, 100);
        // 填充矩形，实心矩形   
        ctx.fillRect(160, 30, 100, 100);
        // 清除矩形，清理矩形区域内的所有图形
        ctx.clearRect(80, 60, 150, 40);

3.1.4 绘制线段

• 把画笔移动到起点 moveTo
• 画线段到终点 lineTo
• 如果上条线的终点和下一条线的起点重合，可省略下条线的起点
• 线段的绘制需要使用stroke函数来执行，执行绘制线段，需要把所有的点设置之后再执行

        ctx.moveTo(100, 150); //把画笔移动到起点，100，150这个坐标点
        ctx.lineTo(100, 200); //画线段到终点

        // ctx.moveTo(100, 200); //把画笔移动到起点，
        ctx.lineTo(150, 200); //画线段到终点


        // ctx.moveTo(150, 200); //如果上条线的终点和下一条线的起点重合，可省略
        ctx.lineTo(150, 150); //画线段到终点 
		ctx.strokeStyle = "red" //设置线颜色，注意在stroke之前设置
        ctx.lineWidth = "15"
        ctx.lineJoin = "round" //折线拐角类型，平滑类型
        ctx.stroke(); //执行绘制线段，需要把所有的点设置之后再执行
        // ctx.closePath(); //闭合绘制路径，把起点和终点连接起来

3.1.5 绘制圆形

绘制圆形之前要设置beginPath重新开始一个绘制路径，避免上下相连

• arc设置圆形属性，圆心横坐标，圆心纵坐标，半径，开始角度，结束角度
• stroke 执行绘制线段，绘制一个线框圆
• fillStyle 设置填充颜色
• fill 执行绘制实心圆

        ctx.beginPath(); //重新开始一个绘制路径，避免上下相连
        // (圆心横坐标，圆心纵坐标，半径，开始角度，结束角度)
        ctx.arc(200, 400, 50, 0, Math.PI * 2); //先设置原型属性
        ctx.stroke(); //执行绘制线段，绘制一个线框圆
        ctx.fillStyle = "blue"; //设置填充颜色
        ctx.fill(); //执行绘制实心圆

3.1.6 绘制曲线

• lineWidth 设置线的粗细
• 设置二次曲线：先通过moveTo把画笔移动到曲线起点，然后再通过quadraticCurveTo 设置二次曲线，最后通过stroke绘制二次曲线
• 设置三次曲线：先通过moveTo把画笔移动到曲线起点，然后再通过bezierCurveTo 设置三次曲线，最后通过stroke绘制三次曲线

     ctx.beginPath() //重新开始一个绘制路径，避免上下相连
        ctx.lineWidth = "3"
        ctx.moveTo(30, 230) //把画笔移动到曲线起点
        ctx.quadraticCurveTo(0, 300, 230, 300); //设置二次曲线
        ctx.stroke(); //绘制二次曲线

        ctx.moveTo(30, 330) //把画笔移动到曲线起点
        ctx.bezierCurveTo(0, 600, 300, 0, 300, 350) //设置三次曲线
        ctx.stroke() //绘制三次曲线

3.1.7 绘制文字

• textBaseLine 设置文字的基准点
• font 设置字体，不能只设置尺寸，还要设置字体
• strokeText 空心描边字体，第一个参数是文字内容，第二个参数是坐标
• fillText 实心描边字体，第一个参数是文字内容，第二个参数是坐标

        ctx.textBaseline = "top" //先设置文字以左上为基准点
        ctx.font = "100px 黑体" //设置字体，不能只设置尺寸
        ctx.strokeText("ganyu", 0, 0) //空心描边字体
        ctx.fillText("你好", 10, 100)

3.1.8 绘制图片

• drawImage：绘制图片

        document.getElementById("img").onload = function() {
            this.style.display = "none" //隐藏img标签
            ctx.drawImage(this, 10, 290, 100, 100) //绘制图片
        }