H5 Canvas实现荣誉证书生成器

没人跟我颁奖，那就自己给自己颁一个吧~

预览

在线链接 https://linyisonger.github.io/H5/22.证书生成器.html
源码地址 https://github.com/linyisonger/H5

功能点

印章绘制
- QQ 浏览器 PC
个性化编辑
- QQ 浏览器 PC
延迟预览
- QQ 浏览器 PC
点击下载
- QQ 浏览器 PC

写法上没有做很多兼容性的处理，大概写了一下逻辑。

效果

代码

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><style>.preview {position: relative;display: inline-block;}img {width: 768px;}.name,.detail,.date,.orgs,.colon {position: absolute;font-family: "Microsoft YaHei"}.name {top: 183px;left: 102px;width: 255px;font-size: 27px;line-height: 36px;background-color: transparent;border-bottom-width: 2px;border-bottom-color: #999;border-top-width: 0;border-left-width: 0;border-right-width: 0;text-align: center;outline: none;}.colon {top: 190px;left: calc(107px + 255px);font-size: 27px;font-family: Arial, Helvetica, sans-serif;font-weight: bold;}.detail {top: 237px;left: 94px;height: 90px;width: 559px;background-color: transparent;resize: none;border: none;font-size: 22px;letter-spacing: 4px;outline: none;text-indent: 50px;}.date {top: 432px;right: 130px;font-size: 14px;line-height: 36px;background-color: transparent;border: none;outline: none;}.orgs {top: 356px;right: 147px;width: 180px;background-color: transparent;resize: none;border: none;font-size: 14px;outline: none;text-align: justify;height: 80px;}</style>
</head><body><div class="preview"><img src="./assets/certificate-1.jpg"><input class="name" type="text" placeholder="获奖人" /><span class="colon">:</span><textarea class="detail" placeholder="获奖成就"></textarea><textarea class="orgs" placeholder="颁发机构"></textarea><input class="date" type="text" placeholder="获奖日期" /></div><canvas id="seal" width="200" height="200" style="opacity: 0;"></canvas><canvas id="preview" width="768" height="531"></canvas><script>let certificate = document.getElementsByTagName('img').item(0);/*** 印章的生成*/function seal(s) {// 防止转圈圈if (!s) return;let c = document.getElementById("seal");let ctx = c.getContext("2d");ctx.clearRect(0, 0, c.clientWidth, c.clientHeight);ctx.fillStyle = "rgb(196,38,29)";ctx.strokeStyle = "rgb(196,38,29)";// 印章的外框ctx.beginPath();ctx.lineWidth = 4;ctx.arc(100, 100, 96, 0, 2 * Math.PI);ctx.stroke();// 星星的生成ctx.beginPath();ctx.lineWidth = 1;let star_start_x = 76;let star_start_y = 88;ctx.moveTo(star_start_x, star_start_y)ctx.lineTo(star_start_x + 20, star_start_y)ctx.lineTo(star_start_x + 20 + 7, star_start_y - 20)ctx.lineTo(star_start_x + 20 + 7 + 6, star_start_y)ctx.lineTo(star_start_x + 20 + 7 + 6 + 20, star_start_y)ctx.lineTo(star_start_x + 20 + 7 + 6 + 20 - 16, star_start_y + 13)ctx.lineTo(star_start_x + 20 + 7 + 6 + 20 - 16, star_start_y + 13)ctx.lineTo(star_start_x + 20 + 7 + 6 + 20 - 16 + 5, star_start_y + 13 + 20)ctx.lineTo(star_start_x + 20 + 7 + 6 + 20 - 16 + 5 - 16, star_start_y + 20)ctx.lineTo(star_start_x + 20 + 7 + 6 + 20 - 16 + 5 - 16 - 18, star_start_y + 13 + 20)ctx.lineTo(star_start_x + 20 + 7 + 6 + 20 - 16 + 5 - 16 - 18 + 6, star_start_y + 13)ctx.closePath()ctx.fill();// 印章上旋转的文字ctx.translate(100, 100);ctx.font = '26px Helvetica';let angle = 4 * Math.PI / (3 * (s.length - 1));for (var i = 0; i < s.length; i++) {let c = s[i];if (i == 0) ctx.rotate(.8 * Math.PI);else ctx.rotate(angle);ctx.save();ctx.translate(70, 0);ctx.rotate(Math.PI / 2);ctx.fillText(c, 0, 5);ctx.restore();}// 归位ctx.rotate(-angle * (s.length - 1));ctx.rotate(-.8 * Math.PI);ctx.translate(-100, -100);return c.toDataURL()}// 预览function preview(name, detail, orgs, date) {let c = document.getElementById("preview");let ctx = c.getContext("2d");console.log(certificate);// 证书背景ctx.drawImage(certificate, 0, 0, c.clientWidth, c.clientHeight);console.log("certificate.onload");// 获奖人ctx.font = "22px Microsoft YaHei";ctx.textAlign = "center";ctx.textBaseline = "top";ctx.fillText(name, 102 + 255 / 2, 183);// 冒号ctx.textAlign = "right";ctx.fillText(":", 102 + 255, 183);// 获奖人底线ctx.beginPath();ctx.moveTo(102, 220)ctx.lineTo(102 + 245, 220)ctx.stroke();// 获奖成就let detailX = 147;let detailY = 237;ctx.font = "22px Microsoft YaHei";ctx.textAlign = "left";ctx.textBaseline = "top";for (let i = 0; i < detail.length; i++) {detailX += 32;if (detailX > 640) {detailX = 115;detailY += 32;}ctx.fillText(detail[i], detailX, detailY);if (detail.charCodeAt(i) <= 255) detailX -= 16}// 颁发机构 let orgX = c.clientWidth - 147 - 180;let orgY = 356ctx.font = "14px Microsoft YaHei";ctx.textAlign = "left";ctx.textBaseline = "top";let orgArr = orgs.split(/\n/).map(o => o.trim());for (let i = 0; i < orgArr.length; i++) {ctx.fillText(orgArr[i], orgX, orgY);orgY += 30;let img = new Image();img.src = seal(orgArr[i]);img.onload = function () {ctx.drawImage(img, c.clientWidth - 220 - i * 110, 350, 100, 100);}}// 绘制获奖日期ctx.font = "14px Microsoft YaHei";ctx.textAlign = "left";ctx.textBaseline = "top";ctx.fillText(date, c.clientWidth - 130 - 153, 450);}let timeoutId = null;let nameDom = document.querySelector('.name');let detailDom = document.querySelector('.detail');let orgsDom = document.querySelector('.orgs');let dateDom = document.querySelector('.date');nameDom.addEventListener('input', checkPreview)detailDom.addEventListener('input', checkPreview)orgsDom.addEventListener('input', checkPreview)dateDom.addEventListener('input', checkPreview)// 检查是否需要渲染function checkPreview() {let name = nameDom.value;let detail = detailDom.value;let orgs = orgsDom.value;let date = dateDom.value;clearTimeout(timeoutId);// 允许渲染if (name.trim() && detail.trim() && orgs.trim() && date.trim()) {timeoutId = setTimeout(() => {console.log("渲染");console.log(name, detail, orgs, date);preview(name, detail, orgs, date)}, 1000);}}// 示例function sample() {nameDom.value = `林一怂儿`;detailDom.textContent = "在2021年全国优秀文章中，你以优秀的错别字数量，以及非常离谱的Bug，遥遥领先。特发此证，以资鼓励。";orgsDom.textContent = `全国文章错别字核查中心\n全国离谱到家委员会`dateDom.value = "2021年12月"checkPreview()}let previewDom = document.getElementById("preview");// 下载function download() {let a = document.createElement('a');a.href = previewDom.toDataURL();a.download = "荣誉证书.png";a.click();}previewDom.addEventListener('click', this.download)certificate.onload = function () {sample();}</script>
</body></html>

奇怪的知识点又增加啦~

H5 Canvas实现荣誉证书生成器相关推荐

Java生成荣誉证书PDF文件
公司最近新需求要针对已经学完课程的同学提供下载结业证书,我们开发小组通过内部协商最终采用pdf方式让用户进行下载.操作pdf java 一般都是通过itext来实现,由于之前没有使用itext生成pd ...
Python 户外俱乐部·登顶纪念证书生成器
每个周末,我喜欢和户外俱乐部的小伙伴们一起到野外登山徒步,一晃有七.八个年头了.前些天受天行健户外聚乐部群主的委托,要给一批驴友用photoshop制作登顶纪念证书(图片),就是拿来给完成登顶的驴友们 ...
H5 Canvas下雨特效
模仿下雨的特效,雨点从空中随机飘落. 这个特效使用了H5的新特性Canvas. 效果演示代码展示 body代码 <!DOCTYPE html> <html lang="e ...
营业执照psd模板2020_荣誉证书聘书奖状模板，CFR矢量素材PSD源文件，700张精美套用...
Hello大家好,我是帮帮.今天跟大家分享一组认证荣誉证书聘书奖状模板,CFR矢量素材,PSD源文件,700张精美套用. 为了让大家能更稳定的下载模板,我们又开通了全新下载方式(见文章末尾),以便大家 ...
java使用itextpdf生成PDF批量打印荣誉证书（指定位置输出文字）
最近公司项目有个需求,批量打印荣誉证书,一开始尝试过传统的网络打印,控件打印,JS调用浏览器打印方法,遇到各种问题,比如定位不准,分页问题,缩放问题等.然后就自己研究,整理了一套打印方案,项目已测 ...
html验证码图片,js+h5 canvas实现图片验证码
本文实例为大家分享了js+h5 canvas实现图片验证码的具体代码,供大家参考,具体内容如下实现效果一.使用技术原生js技术+html5 canvas画图利用Math.random()函数随 ...
计算机奖学金用英语怎么说,奖学金证书的翻译，三好学生荣誉证书，优秀学生干部荣誉证书的英语，英语四、六级和计算机证书，辅修证书的英语怎么说，教学实践单项奖，社会实践单项奖用英语怎么说...
一.奖学金证书 1. X等优秀学生奖学金(例:一等优秀学生奖学金) CERTIFICATE OF SCHOLARSHIP Mr. 姓名 won the First Prize of Excellent ...
html与css编程证书,利用CSS布局做一个简单的荣誉证书（代码示例）
本篇文章将给大家介绍如何使用css布局制作一个简单的荣誉证书,有趣且实用,希望对需要的朋友有所帮助! 那么利用css布局实现简单荣誉证书样式的效果是非常简单的,主要用到以下几个基础属性: backgr ...
至高荣誉：WPS制作荣誉证书(转)
至高荣誉:WPS制作荣誉证书(转) 每年岁末,单位都要为本年度的先进个人颁发荣誉证书,以示鼓励.商店里卖的证书内页不但千篇一律,内容古板且难合心意,那就自己用WPS 2000自己制作荣誉证书内页吧. ...

H5 Canvas实现荣誉证书生成器

H5 Canvas实现荣誉证书生成器

预览

功能点

效果

代码

H5 Canvas实现荣誉证书生成器相关推荐

最新文章

热门文章