【学习随记】原生js canvas 画海报
2024-06-06 15:43:45
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>原生js canvas 画海报</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" />
<script src="js/axios.min.js"></script>
<script src="js/vconsole.min.js"></script>
<script src="js/jquery.js"></script>
<script type="text/javascript">var vConsole = new VConsole();document.documentElement.style.fontSize=document.documentElement.clientWidth/7.5+"px";window.onresize=function(){document.documentElement.style.fontSize=document.documentElement.clientWidth/7.5+"px";};
</script>
<style type="text/css">*{margin: 0;padding: 0;}body{font-size: .3rem;
}.createBtn{height: .8rem;line-height: .8rem;margin-bottom: .3rem;text-align: center;background: #f5f5f5;
}
.showPoster{display: block;width: 80%;margin: 0 auto;border: 1px solid lime;
}</style>
</head>
<body><p class="createBtn" onclick="Poster()">生成</p>
<img class="showPoster" id="posterBox"><script type="text/javascript">
// 注意 测试时如果使用本地图片，要使用服务器打开，不然可能会碰到跨域问题let posterBox = document.getElementById("posterBox");// 生成海报 原生绘制
function Poster(){// here open loading // loading 开启console.log("原生js canvas 开始画海报 satrt");let that = this;let c = document.createElement('canvas');let width = 750;let height = 1205;c.width = width;c.height = height;const ctx = c.getContext("2d");// 填充背景色ctx.fillStyle = "#ffffff";ctx.fillRect(0, 0, 750, 1205);// 画 大背景let bg = new Image();bg.src = './test/poster_bg.png'; // 背景图片地址// bg.setAttribute("crossOrigin", "anonymous");bg.onload = ()=>{ctx.drawImage(bg, 0, 0, c.width, 969);// 画 头像let head = new Image();// head.setAttribute("crossOrigin", "anonymous"); // 设置网络图片跨域的问题, 如果图片有跨域要设置，需要关注一下是在设置src前或者是之后设置，之前碰到这点有问题，忘了head.src = './test/logo.png'; // logo图片地址// head.setAttribute("crossOrigin", "anonymous");head.onload = ()=>{ctx.save();let qrX = 30;let qrY = 1001;let qrW = 80;// ctx.beginPath();ctx.arc(qrX + qrW / 2, qrY + qrW / 2, qrW / 2, 0, Math.PI * 2, false);// ctx.strokeStyle = "lime";// ctx.lineWidth = 1;// ctx.stroke();// ctx.closePath();ctx.clip();ctx.drawImage(head, 30, 1001, 80, 80);ctx.restore();}// 画 昵称ctx.font = "24px PingFangSC";ctx.fillStyle = "#4a4a4a";ctx.fillText("Haleays", 127, 1030); // nickName// 画 文案1ctx.font = "28px PingFangSC";ctx.fillText('一起来学画海报', 127, 1075);// 画 文案2ctx.font = "28px PingFangSC";ctx.fillText('你学会了吗哈哈', 525, 1114);// 画 文案3ctx.font = "28px PingFangSC";ctx.fillText('要多学习', 568, 1154);// 画 QRcodelet QRcode = new Image();QRcode.src = './test/sun_qr_01.jpg'; // QRcode 地址// QRcode.setAttribute("crossOrigin",'Anonymous')QRcode.onload = ()=>{ctx.save();let qrX = 550;let qrY = 924;let qrW = 142;ctx.beginPath();ctx.arc(qrX + qrW / 2, qrY + qrW / 2, qrW / 2, 0, Math.PI * 2, false);ctx.strokeStyle = "#D8D8D8";ctx.lineWidth = 1;ctx.stroke();ctx.closePath();ctx.clip();ctx.drawImage(QRcode, 550, 924, 142, 142);ctx.restore();}}setTimeout(()=>{ // 延迟1s设置img地址，因为可能直接设置，canvas还没有画完，就会空白// here close Loading // loading 关闭posterBox.src = c.toDataURL();// document.body.appendChild(c); // 把canvas插入到document中}, 1000);console.log("原生js canvas 开始画海报 end");}</script>
</body>
</html>【学习随记】原生js canvas 画海报相关推荐
- 五子棋人机对战_原生JS+Canvas实现五子棋游戏
原生JS+Canvas实现五子棋游戏 效果图 主要功能模块为: 1.人机对战功能 2.悔棋功能 3.撤销悔棋功能 二.代码详解 2.1 人机对战功能实现 从效果图可以看到,棋盘的横竖可以放的位置为15 ...
- html五子棋悔棋,原生 JS + Canvas 实现五子棋游戏
原标题:原生 JS + Canvas 实现五子棋游戏 || 一.功能模块 先看下现在做完的效果: 线上体验: https://wj704.github.io/five_game.html 主要功能模块 ...
- matlab 模拟心电图,使用原生js+canvas实现模拟心电图的实例
从2015年2月转行进入IT行业,到现在也有将近两年的时间了,从最开始的java到现在的前端,前进的路上一直靠自己摸索,一路走到现在,前端大神是绝对谈不上的,最多算一只刚入门的菜鸟. 从最开始的懵懵懂 ...
- java心电图_使用原生js+canvas实现模拟心电图
从2016年2月转行进入IT行业,到现在也有将近两年的时间了,从最开始的java到现在的前端,前进的路上一直靠自己摸索,一路走到现在,前端大神是绝对谈不上的,最多算一只刚入门的菜鸟. 从最开始的懵懵懂 ...
- html五子棋游戏制作原理,原生JS+Canvas实现五子棋游戏
功能模块 先看下现在做完的效果: 代码详解 人机对战功能实现 从效果图可以看到,棋盘的横竖可以放的位置为15*15,通过canvas画棋盘: //绘画棋盘 var drawChessBoard = f ...
- 前端小白写了个网页版五子棋游戏，使用原生 JS + Canvas 实现绘制棋子、棋盘
功能模块 快来体验下吧!看下你能赢得了计算机么? 主要功能模块为: 1.人机对战功能 2.悔棋功能 3.撤销悔棋功能 老规矩,源码贴上 具体代码 (1)HTML代码 <!DOCTYPE html ...
- 图片五子棋PHP接口,原生JS+Canvas实现五子棋游戏实例
一.功能模块 先看下现在做完的效果: 主要功能模块为: 1.人机对战功能 2.悔棋功能 3.撤销悔棋功能 二.代码详解 2.1 人机对战功能实现 从效果图可以看到,棋盘的横竖可以放的位置为15*15, ...
- 原生js canvas 碰撞游戏的开发笔记
-----------------------------------------------福利--------------------------------------------- ----- ...
- 用php语句绘制圆锥,JS+canvas画一个圆锥实例代码_javascript技巧
本篇文章给大家讲解html中用canvas函数配合JS画出一个圆锥形的图形实例,canvas是html5中新增加的新属性,对HTML5中的canvas感兴趣的朋友学习测试下吧. 以下是我们给大家分享是 ...
最新文章
- 干货 | 你的Paper阅读能力合格了吗（硕士生版）
- 注意力机制又一大作！DCANet：学习卷积神经网络的连接注意力
- PolyBase 指南
- JSP 活动元素 ＜jsp:directive.pageimport=“zero.space.ch03.Bookbean“/＞ 解读
- java phaser用法_第3章Phaser的使用-（java并发编程核心方法与框架）
- 一文带你掌握OBS的两种常见的鉴权方式
- 【收藏】图片垂直居中的解决办法
- 设备、线程-Android音频系统之AudioFlinger(二)-by小雨
- 基于MATLAB OCR的发票识别系统
- java 对话 智能,如何用Java实现智能对话机器人
- Python数据分析与处理——处理中国地区信息
- 什么是黑链？什么是黑帽？什么是明链？
- java正整数分解因数_java如何将一个正整数分解质因数
- APP启动时间检测——u-apm
- 论文总结 - Playing Atari with Deep Reinforcement Learning
- HBase的详细介绍(概念以及特性)
- 在线副业教程之 02 你学的越多，你赚的越多+你必须开始学习的5个最好的在线副业
- 安装usb摄像头驱动引起VMwareWorkstation9虚拟机无法正常打开
- 有网络登不上QQ0000001错误
- 解决 ERROR: cannot launch node of type [xxx]: can‘t locate node [xxx] in package [xxx]