使用canvas画一个文字提示框(下方带三角箭头的)

作者: 黑白不过灰 | 来源:发表于2019-08-25 14:07 被阅读0次

使用canvas画一个文字提示框(下方带三角箭头的)
整理
2018-04-07
小功能
iOS9提示框UIAlertController
html带箭头的提示框
css 实现三角形箭头
小三角与气泡
理解Core Graphics的Clipping和填充模式
CSS实现带箭头的提示框

由于公司大佬不满意地图的文件提示框的样式,需要我去弄一个类似于antd的提示框的样式

我太难了

没办法,大佬说的话你敢不听?你不听一个试试.......

你试试
唉,折腾呗!!!!!!,不多bb,上代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>canvas绘制文字提示框</title>
    <style>
    </style>
</head>

<body>
    <canvas id="wrap"></canvas>
    <script type="text/javascript">
        let canvas = document.getElementById('wrap');
        let context = canvas.getContext('2d');
        // 定义画布的宽度
        canvas.width = 400;
        // 定义画布的高度
        canvas.height = 200;
        // 定义canvas画笔的x坐标点
        let x = 0;
        // 定义canvas画笔的y坐标点
        let y = 0;
        // 定义圆角的半径
        let r = 15;
        // 提示框的宽度
        let w = canvas.width;
        // 提示框的高度======》画布高度-下放三角箭头的高度
        let h = canvas.height-r;
        // 缩放
        context.scale(1, 1);
        // 文字提示框的颜色
        context.fillStyle = '#ccc';
        // 开始
        context.beginPath();
        // 画笔移动到起始位置
        context.moveTo(x + r, y);
        // 绘制右上角的圆角
        context.arcTo(x + w, y, x + w, y + h, r);
        // 绘制右下角的圆角
        context.arcTo(x + w, y + h, x, y + h, r);
        
        // 画三角形轮廓
        // 绘制到三角形起点的位置
        context.lineTo(x + w, y + h);
        // 绘制三角形的起点到顶点的线段
        context.lineTo(x + w / 2 + 10, y + h);
        // 绘制顶点到三角形另一边的线段
        context.lineTo(x + w / 2, y + h+r);
        // 绘制三角形结束点到左下方的圆角起始处
        context.lineTo(x + w / 2 - 10, y + h );

        // 绘制左下角的圆角
        context.arcTo(x, y + h, x, y, r);
        // 绘制左上角的圆角
        context.arcTo(x, y, x + w, y, r);
        // 设置阴影
        context.shadowColor = 'rgba(0, 0, 0, 0.2)'; // 颜色
        context.shadowBlur = 5; // 模糊尺寸
        context.shadowOffsetX = 2; // 阴影Y轴偏移
        context.shadowOffsetY = 2; // 阴影X轴偏移
        // 关闭,形成一个闭合的回路---->轮廓
        context.closePath();
        // 填充
        context.fill();
    </script>
</body>

</html>

附上效果图

俺是效果图