HTML使用canvas绘制海报（网络图片）

最新推荐文章于 2024-12-02 17:48:32 发布

时间是包治百病的庸医

最新推荐文章于 2024-12-02 17:48:32 发布

阅读量1.2k

点赞数

CC 4.0 BY-SA版权

文章标签： html 网络前端

本文链接：https://blog.youkuaiyun.com/leng0920/article/details/134270587

生成前：

生成后：

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">

		<title>媒体参会嘉宾邀请函生成链接</title>
		<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@2.10/lib/index.css" />

		<style>
			#app {
				width: 100vw;
				position: relative;
			}

			* {
				margin: 0;
				padding: 0;
			}

			[v-cloak] {
				display: none;
			}

			.bg {
				width: 100vw;
				height: 100vh;
				min-height: 100vh;
				position: relative;
				overflow: hidden;
			}


			#scream {
				width: 100%;
				height: 100%;

			}

			.closeImg {
				width: 34px;
				height: 34px;
			}

			.pop {
				position: absolute;
				top: 0;
				left: 0;
				height: 100%;
				width: 100%;
				background: rgba(0, 0, 0, 0.6);
				z-index: 98;
			}

			.saveImg {
				width: 100%;
				display: block;
			}

			.popImg {
				width: 100%;
				position: absolute;
				top: 0;
				left: 0;
				z-index: 9999;
			}

			.popImgClose {
				width: 100%;
				height: 100px;
				line-height: 100px;
				position: fixed;
				top: 0;
				left: 0;
				z-index: 19999;
				font-size: 36px;
				font-weight: 500;
				col