admin 管理员组文章数量: 1086866
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) //绘制图片}
本文标签： 2D3D视图变换canvas画布
版权声明：本文标题：2D3D视图变换、canvas画布 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.roclinux.cn/b/1688026463a170345.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论