由于公司大佬不满意地图的文件提示框的样式,需要我去弄一个类似于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>
附上效果图
俺是效果图
