摘要：初略算了算大概有20天没有写博客了，原本是打算1月1号元旦那天写一个年终总结的，博客园里大佬们都在总结过去，迎接将来，看得我热血沸腾，想想自己也工作快2年了，去年都没有去总结一下，今年势必要总结一番了，但是工作任务有点紧，就把这件事搁置起来了，只好推到来年收假去写一篇总结性的博客了，说起写博客，还是我的一个室友推荐我来写的，当时就觉得上班任务都做不完，哪有时间来写博客，后来发现自己有问题就去找别人的博客来解决，就想着自己也写博客，把自己不知道或者有经验的记录下来，一方面以后遇到同样的问题可以来参考，另一方面说不定也多多少少能帮助到一些人，现在也断断续续写了大概20篇博客了，每当别人留言说学到了，我就坚定了我写博客的想法了，咳咳，话题扯开了，扯回来......

en,然后我要说什么来着？对，如何用画布生成一张海报，就像这样：

咳咳，拿错了，拿出我写的生成报告的图片的，博客这里介绍入门级的，再来一次，就像这样：

嗯，本文就按照上方这张海报来进行讲解（图文与博主实际想法不符）。

一.什么是Canvas?

HTML5 <canvas> 元素用于图形的绘制，通过脚本 (通常是JavaScript)来完成.

<canvas> 标签只是图形容器，您必须使用脚本来绘制图形。

你可以通过多种方法使用 canvas 绘制路径,盒、圆、字符以及添加图像。

二.创建一个画布（Canvas）

<canvas id="aa" width="370px"height="667px" style="display: none;"></canvas>

三.Canvas-文本

var aa = document.getElementById('aa');

var bb = aa.getContext('2d');

bb.fillStyle = '#fff';   // 文字填充颜色

bb.font = '30px Adobe Ming Std';

bb.fillText('猪年快乐！',120,200);

四.Canvas-图片

var imgtwo = new Image;

imgtwo.src = 'img/rjgx-canvasthree.png';

imgtwo.onload = function () {

   bb.drawImage(imgtwo, 0,0,370,667);

}

五.Canvas-文本换行

fillText()在固宽的canvas中，字数过多的时候，并不会自动换行，我们可以增加canvas本身的宽度，但这不是解决问题的根本方法。还记得之前介绍canvas基本api的时候，有一个函数，

context.measureText(text)

这个函数可以测量字体的宽高度，那就好办了，我们计算好我们字符串的长度加上一个大概的宽度，基本上可以处理这种换行的问题了。

bb.fillStyle = 'yellow';

bb.font = '26px Adobe Ming Std';

bb.lineWidth=1;

var str = "哈哈啊哈哈哈哈哈啊哈哈哈哈哈啊哈哈哈哈哈啊哈哈哈哈哈啊哈哈哈哈哈啊哈哈哈哈哈啊哈哈哈"

//            bb.fillText(str,65,750);

var lineWidth = 0;

var canvasWidth = aa.width-50;//计算canvas的宽度

var initHeight=400;//绘制字体距离canvas顶部初始的高度

var lastSubStrIndex= 0; //每次开始截取的字符串的索引

for(let i=0;i<str.length;i++){

lineWidth+=bb.measureText(str[i]).width;

if(lineWidth>canvasWidth){

  bb.fillText(str.substring(lastSubStrIndex,i),25,initHeight);//绘制截取部分

  initHeight+=40;//40为字体的高度

  lineWidth=25;

  lastSubStrIndex=i;

}

if(i==str.length-1){//绘制剩余部分

  bb.fillText(str.substring(lastSubStrIndex,i+1),25,initHeight);

}

}

六.Canvas-加入容器

window.onload=function(){

var img = convertCanvasToImage(aa);

$('.box').append(img);

console.log(img);

}

function convertCanvasToImage(canvas) {

    var image = new Image();

    image.src = canvas.toDataURL("image/png");

    return image;

}

七.Canvas-下载

//下载海报

function downloadimg() {

    var img = $('.box').children('img').attr("src");

    var alink = document.createElement("a");

    alink.href = img;

    alink.download = "新年快乐.png";

    alink.click();

}

八.整体代码

好了好了，知道了，我其实也不喜欢看介绍，直接给我个demo多好，直接复制看效果，但是不介绍直接发代码会被移除首页的，所以，你们就勉为其难看一下吧，希望有用：

<!doctype html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>

    <title>文字+图片+下载图片</title>

    <style>

        *{

            margin: 0;

            padding: 0;

        }

    </style>

</head>

<body>

    <canvas id="aa" width="370px"height="667px" style="display: none;"></canvas>

    <div class="box" style="background-color:red;width: 370px;height: 667px;"></div>

    <input type="button"  value="下载画报" style="margin-left: 150px;margin-top: 20px;" onclick="downloadimg()"/>

    <script>

        var aa = document.getElementById('aa');

        var bb = aa.getContext('2d');

        var imgone = new Image;

        imgone.src = 'img/happy.png';

        imgone.onload = function () {

            bb.drawImage(imgone, 0,0,370,667);

            bb.fillStyle = '#fff';   // 文字填充颜色

            bb.font = '30px Adobe Ming Std';

            bb.fillText('猪年快乐！',120,200);

            bb.fillStyle = '#fff';

            bb.font = '40px Adobe Ming Std';

            bb.fillText('2019年',120,270);

            bb.fillStyle = '#fff';

            bb.font = '26px Adobe Ming Std';

            bb.fillText('Bug也会一直陪在你身边',40,320);

            bb.fillStyle = 'yellow';

            bb.font = '26px Adobe Ming Std';

            bb.lineWidth=1;

            var str = "哈哈啊哈哈哈哈哈啊哈哈哈哈哈啊哈哈哈哈哈啊哈哈哈哈哈啊哈哈哈哈哈啊哈哈哈哈哈啊哈哈哈"

//            bb.fillText(str,65,750);

            var lineWidth = 0;

            var canvasWidth = aa.width-50;//计算canvas的宽度

            var initHeight=400;//绘制字体距离canvas顶部初始的高度

            var lastSubStrIndex= 0; //每次开始截取的字符串的索引

            for(let i=0;i<str.length;i++){

                lineWidth+=bb.measureText(str[i]).width;

                if(lineWidth>canvasWidth){

                    bb.fillText(str.substring(lastSubStrIndex,i),25,initHeight);//绘制截取部分

                    initHeight+=40;//40为字体的高度

                    lineWidth=25;

                    lastSubStrIndex=i;

                }

                if(i==str.length-1){//绘制剩余部分

                    bb.fillText(str.substring(lastSubStrIndex,i+1),25,initHeight);

                }

            }

        }

        window.onload=function(){

        var img = convertCanvasToImage(aa);

        $('.box').append(img);

        console.log(img);

        }

        function convertCanvasToImage(canvas) {

            var image = new Image();

            image.src = canvas.toDataURL("image/png");

            return image;

        }

        //下载海报

        function downloadimg() {

            var img = $('.box').children('img').attr("src");

            var alink = document.createElement("a");

            alink.href = img;

            alink.download = "新年快乐.png";

            alink.click();

        }

    </script>

</body>

</html>

总结，希望这篇文章对大家有用，如果觉得博主写的还可以，欢迎点关注哦，明年会更新我的2018年终总结哦，在这里祝大家2019年新年快乐，早日脱单，永不脱发，有什么问题欢迎留言，

H5如何用Canvas画布生成并保存带图片文字的新年快乐的海报的更多相关文章

  1. H5 新增标签canvas 画布

    canvas是写在body中的标签,设置宽高后,通过JS来往其中绘制想要的内容, canvas可以理解为一个画板,而JS就是你的画笔. 1.获取到画布 var canvas = document.ge ...

  2. 使用canvas画布生成二维码

    1. 基本用法 <canvas>标签只有两个属性-----width和height CSS: <canvas class="qrcode" width=" ...

  3. svg转化成canvas以便生成base64位的图片

    很久前写了关于把html转成图片的一个例子,最近有出了新的问题.利用html2canvas.js文件把html转成base64位的图片是没什么问题的,但也不是绝对的,比如这时候不能碰见svg这个鬼,h ...

  4. java 二维码生成（可带图片）springboot版

    本文(2019年6月29日 飞快的蜗牛博客) 有时候,男人和女人是两个完全不同的世界,男人的玩笑和女人的玩笑也完全是两码事,爱的人完全不了解你,你也不要指望一个女人了解你,所以男的不是要求别人怎么样, ...

  5. 使用zxing生成彩色或带图片的二维码

    <!-- https://mvnrepository.com/artifact/com.google.zxing/core --> <dependency> <group ...

  6. [技术博客]海报图片生成——小程序canvas画布

    目录 背景介绍 canvas简介 代码实现 难点讲解 圆角矩形裁剪失败之PS的妙用 编码不要过硬 对过长的文字进行截取 真机首次生成时字体不对 drawImage只能使用本地图片 背景介绍 目标:利用 ...

  7. h5开发中,利用微信或者QQ登陆以后获取用户头像在canvas画布显示问题

    在实际开发上先的h5页面产品中,总会遇到各种坑,好多坑都是安卓和iPhone端兼容的问题(用电脑谷歌浏览器输入  chrome://inspect/#devices可以用手机USB调试,打开) eg: ...

  8. 使用HTML5画布（canvas）生成阴影效果

    来源:GBin1.com 使用HTML5的画布特性,我们可以创建图形,在这片文章中,我们将创建图形的阴影. var canvas = document.getElementById('shadowca ...

  9. 用H5中的Canvas等技术制作海报

    在去年的时候也实现过合成海报的功能,不过当时时间仓促,实现的比较简单. 就一个旋转功能,图片也不能拖动放大,也不能裁剪. 去年的实现可以参考<移动图片操作--上传>和<移动图片操作- ...

随机推荐

  1. 解决 Eclipse Indigo 3.7、ADT 中文字体偏小，完美 Consolas 微软雅黑混合字体！

    Eclipse是著名的跨平台的自由集成开发环境(IDE).6月22日Eclipse 3.7 正式发布,代号是 Indigo . 在 Windows 7 下初始后化,发现界面变化不大,但中文字体却面目全 ...

  2. 在AbpZero中hangfire后台作业的使用——hangfire的调度

    在abpzero框架中,hangfiire通过依赖注入来进行接口的调用 hangfire的事件处理分为以下几种: 1.基于队列的任务处理(Fire-and-forget jobs) var jobId ...

  3. ubuntu Mono+Jexus 部署到 ASP.NET MVC 5

    之前搞了很多次都是卡在了razor那个异常哪里,今天心血来潮就在试一试,一试竟然成功了,激动的我赶紧记录下历程.废话不说,走起... ubuntu 16.04 安装mono(最新版 5.14.0) 官 ...

  4. C#通过rdp账密直接打开远程桌面

    思路是首先新建一个vbs脚本,再创建一个bat脚本,再创建rdp文件,运行顺序是vbs->bat->rdp.rdp文件里面包含远程电脑的账密和其它信息,这样就可以不用再输入账密,而在程序里 ...

  5. （samba启动失败）smb.service: main process exited, code=exited, status=1/FAILURE

    按照指示,前往:journalctl -xe 没什么发现,搜的时候有人说也可以查看 journalctl -r 打出来之后我也看不出什么门道来 又看到有人说 smb 方面可以看看 testparm 我 ...

  6. Android多媒体整体架构图

    Android多媒体整体架构图 MediaPlayer框架图 Camera框架图 SoundRecorder框架图 VideoCamera框架图 OpenCore与Skia ALSA Audio框架图 ...

  7. PHP之旅8 URL与表单

    表单 表单的出现让用户和后台主机有了直接的交互,网站开始变的‘动态起来’,在HTML的各个标记符中,与PHP关系最为紧密的要属表单标记符了,常见的表单标记符有<form>.<inpu ...

  8. [转][SQL]如何实现存储过程中动态加入条件---没想到语句可以这么巧妙

    在存储过程过程中,如果要实现Select查询的where子句动态查询,可以用exec ( "select .... where" +@whereStr)这样的方式.但这样的话,感觉 ...

  9. 最常用的15大Eclipse开发快捷键技巧

    1.alt+?或alt+/:自动补全代码或者提示代码 这个是我最得意的快捷键组合了,尤其是当输入syso几个字符之后,2个手指轻松按下这2个键的时候,自动就补全System.out.println() ...

  10. 快速滑动时 `cellForRow` 的调用次数

    问题 有一个 1000 个 cell 的 tableView,刚刚进入界面时,contentOffset 为 0.用手快速滑动 tableView,直至最下面一个 cell 显示在屏幕上. 这个过程中 ...