[前端] 如何用canvas绘制一个金字塔图

样子

背景

echarts只有平面版本的金字塔，但是就想要一个这种pretend3D金字塔图。所以使用canvas绘制。

canvas介绍

canvas画布以左上角为原点， 水平向右X轴正方向， 垂直向下Y轴正方向

canvasDom.getContext(“2d”) // 取context对象context属性 widthheightbeginPath() // 开始绘制图形moveTo(x,y) // 起点lineTo(x,y) // 多次 *** 作，多边形的端点fillStyle // 设置填充颜色fill() // 填充纯色closePath() //结束绘制图形store() // 绘制线lineWidth : 线宽度stokeStyle : 线颜色storeText(str, x, y) // 在x,y处画文字 Then

然后就可以直接画出来了。