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

HTML5 前端之家
前端之家收集整理的这篇文章主要介绍了H5如何用Canvas画布生成并保存带图片文字的新年快乐的海报，前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。

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

生成一张海报，就像这样：

生成报告的图片的，博客这里介绍入门级的，再来一次，就像这样

一.什么是Canvas?

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

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

方法使用 canvas 绘制路径,盒、圆、字符以及添加图像。

二.创建一个画布（Canvas）

三.Canvas-文本

aa = document.getElementById('aa' bb = aa.getContext('2d'= '#fff'; 文字填充颜色 bb.font = '30px Adobe Ming Std''猪年快乐！',120,200);

四.Canvas-图片

imgtwo = = 'img/rjgx-canvasthree.png'imgtwo.onload = <span style="color: #0000ff">function<span style="color: #000000"> () {
bb.drawImage(imgtwo,0,370,667<span style="color: #000000">);
}

五.Canvas-文本换行

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

context.measureText(text)

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

bb.fillStyle = 'yellow'= '26px Adobe Ming Std'=1 str = "哈哈啊哈哈哈哈哈啊哈哈哈哈哈啊哈哈哈哈哈啊哈哈哈哈哈啊哈哈哈哈哈啊哈哈哈哈哈啊哈哈哈" lineWidth = 0 canvasWidth = aa.width-50; initHeight=400; lastSubStrIndex= 0; 截取的字符串的索引 (let i=0;i+=(lineWidth>25,initHeight);截取部分 initHeight+=40; lineWidth=25=(i==str.length-1){ bb.fillText(str.substring(lastSubStrIndex,i+1),25

六.Canvas-加入容器

window.onload= img ='.Box'<span style="color: #0000ff">function<span style="color: #000000"> convertCanvasToImage(canvas) {
<span style="color: #0000ff">var image = <span style="color: #0000ff">new<span style="color: #000000"> Image();
image.src = canvas.toDataURL("image/png"<span style="color: #000000">);
<span style="color: #0000ff">return<span style="color: #000000"> image;
}

七.Canvas-下载

img = $('.Box').children('img').attr("src" alink = document.createElement("a"== "新年快乐.png"

八.整体代码

效果，但是不介绍直接发代码会被移除首页的，所以

Meta Meta Meta 文字+图片+下载图片 Box" </span><span style="background-color: #f5f5f5; color: #0000ff"&gt;var</span><span style="background-color: #f5f5f5; color: #000000"&gt; imgone </span><span style="background-color: #f5f5f5; color: #000000"&gt;=</span> <span style="background-color: #f5f5f5; color: #0000ff"&gt;new</span><span style="background-color: #f5f5f5; color: #000000"&gt; Image; imgone.src </span><span style="background-color: #f5f5f5; color: #000000"&gt;=</span> <span style="background-color: #f5f5f5; color: #000000"&gt;'</span><span style="background-color: #f5f5f5; color: #000000"&gt;img/happy.png</span><span style="background-color: #f5f5f5; color: #000000"&gt;'</span><span style="background-color: #f5f5f5; color: #000000"&gt;; imgone.onload </span><span style="background-color: #f5f5f5; color: #000000"&gt;=</span> <span style="background-color: #f5f5f5; color: #0000ff"&gt;function</span><span style="background-color: #f5f5f5; color: #000000"&gt; () { bb.drawImage(imgone,</span><span style="background-color: #f5f5f5; color: #000000"&gt;0</span><span style="background-color: #f5f5f5; color: #000000"&gt;,</span><span style="background-color: #f5f5f5; color: #000000"&gt;370</span><span style="background-color: #f5f5f5; color: #000000"&gt;,</span><span style="background-color: #f5f5f5; color: #000000"&gt;667</span><span style="background-color: #f5f5f5; color: #000000"&gt;); bb.fillStyle </span><span style="background-color: #f5f5f5; color: #000000"&gt;=</span> <span style="background-color: #f5f5f5; color: #000000"&gt;'</span><span style="background-color: #f5f5f5; color: #000000"&gt;#fff</span><span style="background-color: #f5f5f5; color: #000000"&gt;'</span><span style="background-color: #f5f5f5; color: #000000"&gt;; </span><span style="background-color: #f5f5f5; color: #008000"&gt;//</span><span style="background-color: #f5f5f5; color: #008000"&gt; <a href="https://www.jb51.cc/tag/wenzi/" target="_blank" class="keywords">文字</a>填充颜色</span>

<span style="background-color: #f5f5f5; color: #000000"> bb.font <span style="background-color: #f5f5f5; color: #000000">= <span style="background-color: #f5f5f5; color: #000000">'<span style="background-color: #f5f5f5; color: #000000">30px Adobe Ming Std<span style="background-color: #f5f5f5; color: #000000">'<span style="background-color: #f5f5f5; color: #000000">;
bb.fillText(<span style="background-color: #f5f5f5; color: #000000">'<span style="background-color: #f5f5f5; color: #000000">猪年快乐！<span style="background-color: #f5f5f5; color: #000000">'<span style="background-color: #f5f5f5; color: #000000">,<span style="background-color: #f5f5f5; color: #000000">120<span style="background-color: #f5f5f5; color: #000000">,<span style="background-color: #f5f5f5; color: #000000">200<span style="background-color: #f5f5f5; color: #000000">);

        bb.fillStyle </span><span style="background-color: #f5f5f5; color: #000000"&gt;=</span> <span style="background-color: #f5f5f5; color: #000000"&gt;'</span><span style="background-color: #f5f5f5; color: #000000"&gt;#fff</span><span style="background-color: #f5f5f5; color: #000000"&gt;'</span><span style="background-color: #f5f5f5; color: #000000"&gt;;
        bb.font </span><span style="background-color: #f5f5f5; color: #000000"&gt;=</span> <span style="background-color: #f5f5f5; color: #000000"&gt;'</span><span style="background-color: #f5f5f5; color: #000000"&gt;40px Adobe Ming Std</span><span style="background-color: #f5f5f5; color: #000000"&gt;'</span><span style="background-color: #f5f5f5; color: #000000"&gt;;
        bb.fillText(</span><span style="background-color: #f5f5f5; color: #000000"&gt;'</span><span style="background-color: #f5f5f5; color: #000000"&gt;2019年</span><span style="background-color: #f5f5f5; color: #000000"&gt;'</span><span style="background-color: #f5f5f5; color: #000000"&gt;,</span><span style="background-color: #f5f5f5; color: #000000"&gt;270</span><span style="background-color: #f5f5f5; color: #000000"&gt;);

        bb.fillStyle </span><span style="background-color: #f5f5f5; color: #000000"&gt;=</span> <span style="background-color: #f5f5f5; color: #000000"&gt;'</span><span style="background-color: #f5f5f5; color: #000000"&gt;#fff</span><span style="background-color: #f5f5f5; color: #000000"&gt;'</span><span style="background-color: #f5f5f5; color: #000000"&gt;;
        bb.font </span><span style="background-color: #f5f5f5; color: #000000"&gt;=</span> <span style="background-color: #f5f5f5; color: #000000"&gt;'</span><span style="background-color: #f5f5f5; color: #000000"&gt;26px Adobe Ming Std</span><span style="background-color: #f5f5f5; color: #000000"&gt;'</span><span style="background-color: #f5f5f5; color: #000000"&gt;;
        bb.fillText(</span><span style="background-color: #f5f5f5; color: #000000"&gt;'</span><span style="background-color: #f5f5f5; color: #000000"&gt;Bug也会一直陪在你身边</span><span style="background-color: #f5f5f5; color: #000000"&gt;'</span><span style="background-color: #f5f5f5; color: #000000"&gt;,</span><span style="background-color: #f5f5f5; color: #000000"&gt;40</span><span style="background-color: #f5f5f5; color: #000000"&gt;,</span><span style="background-color: #f5f5f5; color: #000000"&gt;320</span><span style="background-color: #f5f5f5; color: #000000"&gt;);

        bb.fillStyle </span><span style="background-color: #f5f5f5; color: #000000"&gt;=</span> <span style="background-color: #f5f5f5; color: #000000"&gt;'</span><span style="background-color: #f5f5f5; color: #000000"&gt;yellow</span><span style="background-color: #f5f5f5; color: #000000"&gt;'</span><span style="background-color: #f5f5f5; color: #000000"&gt;;
        bb.font </span><span style="background-color: #f5f5f5; color: #000000"&gt;=</span> <span style="background-color: #f5f5f5; color: #000000"&gt;'</span><span style="background-color: #f5f5f5; color: #000000"&gt;26px Adobe Ming Std</span><span style="background-color: #f5f5f5; color: #000000"&gt;'</span><span style="background-color: #f5f5f5; color: #000000"&gt;;
        bb.lineWidth</span><span style="background-color: #f5f5f5; color: #000000"&gt;=</span><span style="background-color: #f5f5f5; color: #000000"&gt;1</span><span style="background-color: #f5f5f5; color: #000000"&gt;; 
        </span><span style="background-color: #f5f5f5; color: #0000ff"&gt;var</span><span style="background-color: #f5f5f5; color: #000000"&gt; str </span><span style="background-color: #f5f5f5; color: #000000"&gt;=</span> <span style="background-color: #f5f5f5; color: #000000"&gt;"</span><span style="background-color: #f5f5f5; color: #000000"&gt;哈哈啊哈哈哈哈哈啊哈哈哈哈哈啊哈哈哈哈哈啊哈哈哈哈哈啊哈哈哈哈哈啊哈哈哈哈哈啊哈哈哈</span><span style="background-color: #f5f5f5; color: #000000"&gt;"</span>

<span style="background-color: #f5f5f5; color: #008000">//<span style="background-color: #f5f5f5; color: #008000"> bb.fillText(str,750);
<span style="background-color: #f5f5f5; color: #0000ff">var<span style="background-color: #f5f5f5; color: #000000"> lineWidth <span style="background-color: #f5f5f5; color: #000000">= <span style="background-color: #f5f5f5; color: #000000">0<span style="background-color: #f5f5f5; color: #000000">;
<span style="background-color: #f5f5f5; color: #0000ff">var<span style="background-color: #f5f5f5; color: #000000"> canvasWidth <span style="background-color: #f5f5f5; color: #000000">=<span style="background-color: #f5f5f5; color: #000000"> aa.width<span style="background-color: #f5f5f5; color: #000000">-<span style="background-color: #f5f5f5; color: #000000">50<span style="background-color: #f5f5f5; color: #000000">;<span style="background-color: #f5f5f5; color: #008000">//<span style="background-color: #f5f5f5; color: #008000">计算canvas的宽度
<span style="background-color: #f5f5f5; color: #0000ff">var<span style="background-color: #f5f5f5; color: #000000"> initHeight<span style="background-color: #f5f5f5; color: #000000">=<span style="background-color: #f5f5f5; color: #000000">400<span style="background-color: #f5f5f5; color: #000000">;<span style="background-color: #f5f5f5; color: #008000">//<span style="background-color: #f5f5f5; color: #008000">绘制字体距离canvas顶部初始的高度
<span style="background-color: #f5f5f5; color: #0000ff">var<span style="background-color: #f5f5f5; color: #000000"> lastSubStrIndex<span style="background-color: #f5f5f5; color: #000000">= <span style="background-color: #f5f5f5; color: #000000">0<span style="background-color: #f5f5f5; color: #000000">; <span style="background-color: #f5f5f5; color: #008000">//<span style="background-color: #f5f5f5; color: #008000">每次开始截取的字符串的索引
<span style="background-color: #f5f5f5; color: #0000ff">for<span style="background-color: #f5f5f5; color: #000000">(let i<span style="background-color: #f5f5f5; color: #000000">=<span style="background-color: #f5f5f5; color: #000000">0<span style="background-color: #f5f5f5; color: #000000">;i<span style="background-color: #f5f5f5; color: #000000"><<span style="background-color: #f5f5f5; color: #000000">str.length;i<span style="background-color: #f5f5f5; color: #000000">++<span style="background-color: #f5f5f5; color: #000000">){
lineWidth<span style="background-color: #f5f5f5; color: #000000">+=<span style="background-color: #f5f5f5; color: #000000">bb.measureText(str[i]).width;
<span style="background-color: #f5f5f5; color: #0000ff">if<span style="background-color: #f5f5f5; color: #000000">(lineWidth<span style="background-color: #f5f5f5; color: #000000">><span style="background-color: #f5f5f5; color: #000000">canvasWidth){
bb.fillText(str.substring(lastSubStrIndex,<span style="background-color: #f5f5f5; color: #000000">25<span style="background-color: #f5f5f5; color: #000000">,initHeight);<span style="background-color: #f5f5f5; color: #008000">//<span style="background-color: #f5f5f5; color: #008000">绘制截取部分
<span style="background-color: #f5f5f5; color: #000000"> initHeight<span style="background-color: #f5f5f5; color: #000000">+=<span style="background-color: #f5f5f5; color: #000000">40<span style="background-color: #f5f5f5; color: #000000">;<span style="background-color: #f5f5f5; color: #008000">//<span style="background-color: #f5f5f5; color: #008000">40为字体的高度
<span style="background-color: #f5f5f5; color: #000000"> lineWidth<span style="background-color: #f5f5f5; color: #000000">=<span style="background-color: #f5f5f5; color: #000000">25<span style="background-color: #f5f5f5; color: #000000">;
lastSubStrIndex<span style="background-color: #f5f5f5; color: #000000">=<span style="background-color: #f5f5f5; color: #000000">i;
}
<span style="background-color: #f5f5f5; color: #0000ff">if<span style="background-color: #f5f5f5; color: #000000">(i<span style="background-color: #f5f5f5; color: #000000">==<span style="background-color: #f5f5f5; color: #000000">str.length<span style="background-color: #f5f5f5; color: #000000">-<span style="background-color: #f5f5f5; color: #000000">1<span style="background-color: #f5f5f5; color: #000000">){<span style="background-color: #f5f5f5; color: #008000">//<span style="background-color: #f5f5f5; color: #008000">绘制剩余部分
<span style="background-color: #f5f5f5; color: #000000"> bb.fillText(str.substring(lastSubStrIndex,i<span style="background-color: #f5f5f5; color: #000000">+<span style="background-color: #f5f5f5; color: #000000">1<span style="background-color: #f5f5f5; color: #000000">),initHeight);
}
}

    }

    window.onload</span><span style="background-color: #f5f5f5; color: #000000"&gt;=</span><span style="background-color: #f5f5f5; color: #0000ff"&gt;function</span><span style="background-color: #f5f5f5; color: #000000"&gt;(){
    </span><span style="background-color: #f5f5f5; color: #0000ff"&gt;var</span><span style="background-color: #f5f5f5; color: #000000"&gt; img </span><span style="background-color: #f5f5f5; color: #000000"&gt;=</span><span style="background-color: #f5f5f5; color: #000000"&gt; convertCanvasToImage(aa);
    $(</span><span style="background-color: #f5f5f5; color: #000000"&gt;'</span><span style="background-color: #f5f5f5; color: #000000"&gt;.<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a></span><span style="background-color: #f5f5f5; color: #000000"&gt;'</span><span style="background-color: #f5f5f5; color: #000000"&gt;).append(img);
    console.log(img);
    }

    </span><span style="background-color: #f5f5f5; color: #0000ff"&gt;function</span><span style="background-color: #f5f5f5; color: #000000"&gt; convertCanvasToImage(canvas) {
        </span><span style="background-color: #f5f5f5; color: #0000ff"&gt;var</span><span style="background-color: #f5f5f5; color: #000000"&gt; image </span><span style="background-color: #f5f5f5; color: #000000"&gt;=</span> <span style="background-color: #f5f5f5; color: #0000ff"&gt;new</span><span style="background-color: #f5f5f5; color: #000000"&gt; Image();
        image.src </span><span style="background-color: #f5f5f5; color: #000000"&gt;=</span><span style="background-color: #f5f5f5; color: #000000"&gt; canvas.toDataURL(</span><span style="background-color: #f5f5f5; color: #000000"&gt;"</span><span style="background-color: #f5f5f5; color: #000000"&gt;image/png</span><span style="background-color: #f5f5f5; color: #000000"&gt;"</span><span style="background-color: #f5f5f5; color: #000000"&gt;);
        </span><span style="background-color: #f5f5f5; color: #0000ff"&gt;return</span><span style="background-color: #f5f5f5; color: #000000"&gt; image;
    }

    </span><span style="background-color: #f5f5f5; color: #008000"&gt;//</span><span style="background-color: #f5f5f5; color: #008000"&gt;下载海报</span>
    <span style="background-color: #f5f5f5; color: #0000ff"&gt;function</span><span style="background-color: #f5f5f5; color: #000000"&gt; downloadimg() {
        </span><span style="background-color: #f5f5f5; color: #0000ff"&gt;var</span><span style="background-color: #f5f5f5; color: #000000"&gt; img </span><span style="background-color: #f5f5f5; color: #000000"&gt;=</span><span style="background-color: #f5f5f5; color: #000000"&gt; $(</span><span style="background-color: #f5f5f5; color: #000000"&gt;'</span><span style="background-color: #f5f5f5; color: #000000"&gt;.<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a></span><span style="background-color: #f5f5f5; color: #000000"&gt;'</span><span style="background-color: #f5f5f5; color: #000000"&gt;).children(</span><span style="background-color: #f5f5f5; color: #000000"&gt;'</span><span style="background-color: #f5f5f5; color: #000000"&gt;img</span><span style="background-color: #f5f5f5; color: #000000"&gt;'</span><span style="background-color: #f5f5f5; color: #000000"&gt;).attr(</span><span style="background-color: #f5f5f5; color: #000000"&gt;"</span><span style="background-color: #f5f5f5; color: #000000"&gt;src</span><span style="background-color: #f5f5f5; color: #000000"&gt;"</span><span style="background-color: #f5f5f5; color: #000000"&gt;);
        </span><span style="background-color: #f5f5f5; color: #0000ff"&gt;var</span><span style="background-color: #f5f5f5; color: #000000"&gt; alink </span><span style="background-color: #f5f5f5; color: #000000"&gt;=</span><span style="background-color: #f5f5f5; color: #000000"&gt; document.createElement(</span><span style="background-color: #f5f5f5; color: #000000"&gt;"</span><span style="background-color: #f5f5f5; color: #000000"&gt;a</span><span style="background-color: #f5f5f5; color: #000000"&gt;"</span><span style="background-color: #f5f5f5; color: #000000"&gt;);
        alink.href </span><span style="background-color: #f5f5f5; color: #000000"&gt;=</span><span style="background-color: #f5f5f5; color: #000000"&gt; img;
        alink.download </span><span style="background-color: #f5f5f5; color: #000000"&gt;=</span> <span style="background-color: #f5f5f5; color: #000000"&gt;"</span><span style="background-color: #f5f5f5; color: #000000"&gt;新年快乐.png</span><span style="background-color: #f5f5f5; color: #000000"&gt;"</span><span style="background-color: #f5f5f5; color: #000000"&gt;;
        alink.click();
    }
</span><span style="color: #0000ff"&gt;</</span><span style="color: #800000"&gt;script</span><span style="color: #0000ff"&gt;></span>

<span style="color: #0000ff"></<span style="color: #800000">body<span style="color: #0000ff">>
<span style="color: #0000ff"></<span style="color: #800000">html<span style="color: #0000ff">>

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

原文链接：https://www.f2er.com/html5/74427.html

猜你在找的HTML5相关文章

BAT大佬推荐使用的HTML5的十个功能
HTML5不是新事物。自从最初发布（2008年1月）以来，我们一直在使用它的一些功能。后来，我...
Pointer Event Api-整合鼠标事件、触摸和触控笔事件
Pointer Events API 是Hmtl5的事件规范之一，它主要目的是用来将鼠标（Mouse）、触摸（tou...
CSS3图片翻转动画技术详解
CSS动画非常的有趣；这种技术的美就在于，通过使用很多简单的属性，你能创建出漂亮的消隐效...
使用CSS3的clip-path(裁剪路径)实现剪贴区域的显示以及实例实现图片渐变
clip-path介绍 clip-path 直译过来就是裁剪路径，使用SVG或形状定义一个HTML元素的可见区域...
CSS3 - @keyframes
语法 必需。动画时长的百分比。 合法的值： 0-100% from（与 0% 相同） to（与 100% 相同）...
CSS使用position:sticky 实现粘性布局
简介 前面写了一篇文章讲解了position常用的几个属性：《CSS 属性之 position讲解》一般都...
CSS效果：CSS3实现模拟select以及其中的三角形
如图实现这样的效果： html代码如下： css样式代码：
CSS3 calc实现滚动条出现页面不跳动
什么是calc()? calc()从字面我们可以把他理解为一个函数function。其实calc是英文单词calc...
CSS/CSS3中的原生变量var详解以及布局响应式网页扩展
使用语法 首先我们先来看一个例子：html代码： css代码： 实现效果： 结果是该DOM元素背景...
CSS3动画属性：转换(transition)
W3C标准中对css3的transition这是样描述的：“css的transition允许css的属性值在一定的时间...
HTMLHTML5JavaScriptCSSjQueryBootstrapAngularjsTypeScriptVueDojoJsonElectronNode.jsextjsExpress XMLES6AjaxFlashUnityReactFlexAnt DesignWeb前端微信小程序微信公众号
关闭广告单独headers封装代码提示错误整数正则非0开头跳页出页码antd table提示URL未注册公众号支付vue hash模式iSlider车牌键盘循环图片echarts 双折左右布局DllPlugin对象创建打字游戏圈选两栏云函数蒙版ES2020橱窗无缝滚动轮播色块碰撞组件销毁文档操作