两种方式:
方式一:用Css属性实现
主要使用css3缩放属性
- scale(倍数) ,x,y轴缩放,x,y缩放倍数相同时可以写一个参数
- scaleX(倍数) ,x轴缩放
- scaleY(倍数) ,y轴缩放
<div style="width: 100%; height: 1px; transform: scaleY(0.5); margin-top: 100px; background: red;"></div>
方式二:canvas—画布
<body>
<canvas width="800" height="800" style="border: 1px dashed purple;"></canvas>
<script>
//获取dom节点
const canvas=document.querySelector('canvas')
//获取上下文
const ctx=canvas.getContext('2d')
ctx.moveTo(600,600) //起点
ctx.lineTo(800,600) //终点
ctx.lineWidth='0.5' //设置线段的宽度
ctx.stroke() //绘制线段
</script>
</body>
我欲乘风归去,又恐琼楼玉宇,高处不胜寒 — 《水调歌头·明月几时有》–宋代苏轼