摘要：初略算了算大概有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. kafka不停止服务的情况下修改日志保留时间

    kafka配置文件如下: broker.id=1 port=9092 host.name=ssy-kafka1 num.network.threads=4 num.io.threads=8 socke ...

  2. 一起学习MVC（1）初步了解MVC

    MVC 即模型视图控制器(Model View Controller)     利于团队开发.便于管理与维护.代码易读性强.未来的主流开发框架结构. 当然,缺点也显而易见,与传统开发框架相比有很大的不 ...

  3. 使用Postman验证TFS Rest API

    概述 你可能已经了解到,TFS自2015版本发布以来,开始支持通过REST API的方式提供接口服务,第三方平台可以通过通用的HTTP协议访问TFS系统,获取数据.请求编译等.REST API在原有. ...

  4. TFS 2015 生成不输出任何结果

    这是一台用于测试的TFS 2015服务器,其中的数据是通过备份和还原,在使用应用层专用的方式配置出来的. 在配置完成代理服务器以后,运行生成,发现在获取代码之前就停止失败了,并且在生成过程中没有任何结 ...

  5. Sql语句在SqlServer中创建数据库、表格并添加约束

    通过Sql语句来创建数据库与架构 创建数据库 数据库的创建首先是要引用主数据库的,需要在master数据库的环境下进行创建.大致的语法如下: -- 使用master数据库 use master -- ...

  6. 对于equals和==的理解

    很多时候equals和==大家都分不太清楚怎么样来使用,今天小编就来教大家怎么使用 equals比较的是两个变量的值是否相等 而==则比较的是这个变量的内存地址是否相同 打个比方来说 String a ...

  7. Windows下TensorFlow安装指南（图文版）

    随着深度学习概念火起来,TensorFlow也跟着成为业界流行的深度学习框架.它采用CPU+GPU的并行计算模式,使得神经网络可以有效的并行计算,从以前的三层网络到现在的深层网络,深度学习+tenso ...

  8. vue-router进阶笔记

    导航守卫 vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航,大白话,检测路由跳转过程中的具体的变化. 一.全局前置守卫——router.beforeEach 使用router. ...

  9. centos 安装oracle 11g r2（二）-----监听配置与创建数据库实例

    centos 安装oracle 11g r2(二)-----监听配置与创建数据库实例 一.监听配置(命令:netca) 1.以 oracle 用户输入命令,启动图形化工具配置监听 [oracle@lo ...

  10. MVC各部分技术体现

      视图层用jsp,javascript 作用--显示数据,接受用户输入数据 控制层用servlet 作用--接收视图层数据,传输 给业务逻辑层(即模型层) 模型层用普通java class 作用-- ...