码云 Html5 Canvas生成海报功能代码
AI 概述
海报用来做引流推广都是非常方便的，所以我们可以使用 Canvas 快速绘制海报，下面是我写的一个实例，希望对大家有帮助。
HTML 代码：
<canvas id="myCanvas"></canvas>
JS 代码：
<script type="text/javascript">
var c = document.getElementById("myCanvas"); // 使用 id 来寻找 canvas 元素
...
海报用来做引流推广都是非常方便的，所以我们可以使用 Canvas 快速绘制海报，下面是我写的一个实例，希望对大家有帮助。
HTML 代码：
<canvas id="myCanvas"></canvas>
JS 代码：
<script type="text/javascript">
var c = document.getElementById("myCanvas"); // 使用 id 来寻找 canvas 元素
var cxt = c.getContext("2d"); // 创建 context 对象
// 设置 myCanvas 的宽高
c.width = 320; //设置 myCanvas 的宽
c.height = 580; //设置 myCanvas 的高
// 绘制一个矩形，用来做全局背景颜色
cxt.fillStyle = "#fff"; // fillStyle 方法将其染成红色
cxt.fillRect(0,0,c.width,c.height); // fillRect 方法是创建一个矩形，x 坐标、y 坐标、宽度、高度
// 把图片绘制到 myCanvas
var img = new Image()
img.src = "imgdemo.jpg" // 图片路径
// 为了防止图片还没加载完成就执行 drawImage，需要延迟 10ms 再执行 drawImage
setTimeout(function(){
cxt.drawImage(img,20,20,280,280);
},10)
// 绘制商品标题，自动换行
cxt.fillStyle="#333";
cxt.font = "15px bold 黑体";
var str = "火山泥岩洗面奶男士专用控油祛痘去黑头去油除螨虫学生补水洁面乳【包邮】"
cxt.textBaseline = "middle";
cxt.textAlign = "left";
var lineWidth = 0;
var canvasWidth = 280;//一行文字占用的宽度
var initHeight=320;//绘制字体距离 canvas 顶部初始的高度
var lastSubStrIndex= 0; //每次开始截取的字符串的索引
for(let i=0;i<str.length;i++){
lineWidth+=cxt.measureText(str[i]).width;
if(lineWidth>canvasWidth){
cxt.fillText(str.substring(lastSubStrIndex,i),20,initHeight);//绘制截取部分
initHeight+=20; //20 为字体的高度
lineWidth=0;
lastSubStrIndex=i;
}
if(i==str.length-1){ //绘制剩余部分
cxt.fillText(str.substring(lastSubStrIndex,i+1),20,initHeight);
}
}
// 绘制券后价底部背景色
cxt.fillStyle = "#ff0036"; // fillStyle 方法将其染成红色
cxt.fillRect(220,360,80,40); // fillRect 方法是创建一个矩形，x 坐标、y 坐标、宽度、高度
// 绘制券底部背景色
cxt.fillStyle = "#ff0036"; // fillStyle 方法将其染成红色
cxt.fillRect(20,360,150,40); // fillRect 方法是创建一个矩形，x 坐标、y 坐标、宽度、高度
// 绘制价格
cxt.fillStyle="#fff";
cxt.font = "normal bold 20px 黑体";
var str_price = "券后价 ¥32.90"
cxt.textBaseline = "middle";
cxt.textAlign = "left";
cxt.fillText(str_price,26,380);
// 绘制券面值
cxt.fillStyle="#fff";
cxt.font = "normal bold 15px 黑体";
var str_quan = "券 ¥9.90"
cxt.textBaseline = "middle";
cxt.textAlign = "left";
cxt.fillText(str_quan,230,380);
// 绘制二维码
var qrcode = new Image()
qrcode.src = "qrcode.png" // 二维码图片路径
// 为了防止图片还没加载完成就执行 drawImage，需要延迟 10ms 再执行 drawImage
setTimeout(function(){
cxt.drawImage(qrcode,95,420,130,130);
},10)
</script>
效果图：
以上关于Html5 Canvas生成海报功能代码的文章就介绍到这了，更多相关内容请搜索码云笔记以前的文章或继续浏览下面的相关文章，希望大家以后多多支持码云笔记。
微信
支付宝声明：本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权/违法违规/事实不符，请将相关资料发送至 admin@mybj123.com 进行投诉反馈，一经查实，立即处理！
重要：如软件存在付费、会员、充值等，均属软件开发者或所属公司行为，与本站无关，网友需自行判断
码云笔记 » Html5 Canvas生成海报功能代码
如若内容造成侵权/违法违规/事实不符，请将相关资料发送至 admin@mybj123.com 进行投诉反馈，一经查实，立即处理！
重要：如软件存在付费、会员、充值等，均属软件开发者或所属公司行为，与本站无关，网友需自行判断
码云笔记 » Html5 Canvas生成海报功能代码
点击生成的时候为什么会报这个错？ Failed to execute ‘drawImage’ on ‘CanvasRenderingContext2D’: The HTMLImageElement provided is in the ‘broken’ state.
在drawImage的时候添加的是一个image对象，不是一个base64图片地址
楼主是否在本站的前端开发QQ群：565733884？
我在里边，你加吧
这个html文件没有引用jQuery，其他文件有
考虑到生成海报，用html2canvas在右下角动态生成一个二维码，方便扫码直接进入链接。
我这个最下边还有个二维码路径，你改了没，至于你用的那个插件我还没用过，我下去帮你研究一下
html2canvas 这是个屏幕截图工具，这好像不符合你需求
主要代码如下：
.but_box{…}
生成我的海报
bui.ready(function(){
$(‘#test_haibao_id’).click(function(){
//上面第二段比较长的代码（图片路径已修改）
)}
})
你改成jQuery的了？
单独把以上代码拷贝到html文件，已经修改了代码中的图片路径，但不显示效果图。是我缺少什么代码吗？多谢！
你确定吗？我刚测试了一下可以呀