我正在参加「初夏创意投稿大赛」详情请看：初夏创意投稿大赛

思路

纸飞机是线条构成的不规则图形，常规css无法实现，我们可以用canvas来进行构图

我们要画的飞机长这个样

canvas画线条

首先创建一个画布

<canvas id="plane" width="1000px" height="1000px"></canvas>

画直线用到canvas的moveTo和canvas的lineTo

1. moveTo是开始的位置
2. lineTo是结束的位置
3. stroke()开始画图

上代码

const canvas = document.querySelector("#plane")
const ctx = canvas.getContext('2d')
ctx.moveTo(400, 50)
ctx.lineTo(50, 150)
ctx.lineTo(150, 200)
ctx.lineTo(400, 50)
ctx.lineTo(200, 250)
ctx.lineTo(300, 340)
ctx.lineTo(400, 50)
ctx.stroke()
ctx.moveTo(150, 200)
ctx.lineTo(160, 300)
ctx.lineTo(200, 250)
ctx.stroke()

定义一个2d的画布

根据飞机的各个点位，进行画图，这里需要各位根据自己的喜好使用，简单说就是一个连线的

效果

画圆

一个飞机过于单调了点，我们在他的尾巴加个小圆球

这就要用到canvas的画圆功能

1. translate定义圆心的位置
2. arc接收5个参数，第一个和第二个为圆心的x，y轴，第三个为圆的半径，第四个第五个分别是圆弧开始和结束

先画个圆弧在尾巴上

ctx.translate(110, 300)
ctx.arc(0, 0, 50, 0, 0.5 * Math.PI)
ctx.stroke()

效果看图

然后在最后的线上面画个圆

 ctx.translate(110, 300)
ctx.arc(0, 0, 50, 0, 0.5 * Math.PI)
ctx.arc(-25, 50, 25, 0, 2 * Math.PI)
ctx.stroke()

这样就好看了很多

总结

canvas非常强大，我这连皮毛都不算，欢迎大家来指导我。祝你幸福，爱你