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

摘要：初略算了算大概有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年新年快乐，早日脱单，永不脱发，有什么问题欢迎留言，

原文出处：https://www.cnblogs.com/hejun26/p/10239649.html

来源：oschina

链接：https://my.oschina.net/u/4314581/blog/3271417

标签

alink

Ming

javascript