目录：@[toc]

金字塔模样

在这里插入图片描述

背景

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

canvas简单介绍

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

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

Then

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

canvas点击事件处理

关于canvas的点击事件， canvas内置接口不能按照区域进行点击事件设置，只能监听canvas整体的点击事件，然后使用以下手段区分canvas不同的区域。

1、按颜色

通过获取鼠标点击的位置在canvas上对应的颜色，可以实现分区域点击。需要自己写判断逻辑。

实测可以：

2、按路径上

canvas官方API，canvasDom.isPointInPath(x,y) ，可以判断是否点击了路径上的点。 3、按范围内通过多边形的覆盖面积，利用每条边的坐标点和对应斜率，判断点击之处是否在当前区域内。需要自己写判断逻辑。 4、按照strokeText canvas官方api，可以判断是否点击了storeText绘制的文字。

导出图片（canvas->png)

        let c =  // 自己拿this.refs 或者getElementById取Dom。
        let context = c.getContext("2d");
        var imgData = context.getImageData(0, 0, canvas1.width, canvas1.height);
        const imageData = canvas1.toDataURL('image/png'); //返回base64的URL
        const elink = document.createElement('a');
        elink.download = '图片';
        elink.style.display = 'none';
        elink.href = imageData;
        document.body.appendChild(elink);
        elink.click();
        URL.revokeObjectURL(elink.href); //释放URL对象
        document.body.removeChild(elink);

[前端] 如何用canvas绘制一个金字塔图，以及设置不同区域的点击事件。