canvas绘制渐变色三角形金字塔

项目需求:需要绘制渐变色三角形金字塔,并用折线添加标识

(其实所有直接用图片放上去也行,但是ui没切图,我也懒得找她要,正好也没啥事,直接自己用代码绘制算了,总结一句就是闲的)

最终效果如下图:
canvas绘制渐变色三角形金字塔_第1张图片
(以上没用任何图片,都是代码绘制的)

在网上找了,有用canvas绘制渐变色三角形,然后再稍微改改变成断层金字塔

右侧的点和折线图使用svg绘制

其他文字和数字通过绝对定位放上去

完整代码如下:

demo.vue

<template>
  <div class="box">
    <div class=

你可能感兴趣的:(前端开发,前端,vue.js,javascript,canva可画)