这篇文章主要介绍“html5如何画海报”，在日常操作中，相信很多人在html5如何画海报问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”html5如何画海报”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！

废话不多说，上代码

<canvasid="myCanvas"width="750"height="1200"></canvas>

dom节点很简单，生成个canvas标签随意写点属性就可以了~

varcanvas=document.getElementById("myCanvas");//获取canvas节点functionimageToCanvas(canvas,url1,url2,code){//传入canvas节点背景图url1头像url2二维码codevarctx=canvas.getContext("2d");varimg1=newImage();img1.src=url1;//前面的不解释了，生成个图片img1.onload=function(){ctx.drawImage(img1,0,0);//当图片加载完成后赋到画布上从00开始。varimg2=newImage();img2.src=url2;img2.onload=function(){ctx.save();//保存当前画布状态ctx.arc(374,134,44,0,2*Math.PI);//剪切操作将正方形的头像切成圆的//从画布上裁剪出这个圆形ctx.clip();//进行裁剪ctx.drawImage(img2,330,90,88,88);//放入img2在33090坐标处大小88ctx.restore();//释放画布状态ctx.font="28pxArial";ctx.textAlign="center";ctx.fillStyle='#FFFFFF';//前面是设置文字属性设为居中ctx.fillText("你叫神马名字",375,220);//文字这里是写死的实际中多传个参数就okvarimg3=newImage();img3.src=code;img3.onload=function(){ctx.drawImage(img3,136,554,478,478);//同理加图像varimgCode=convertCanvasToImage(canvas);//将图片转为base64console.log(imgCode.getAttribute('src'))}}}}imageToCanvas(canvas,"1.png",'3.jpeg','code.png');//初始化functionconvertCanvasToImage(canvas){varimage=newImage();image.src=canvas.toDataURL("image/png");//canvas转化为imgreturnimage;}

这样就可以得到一个base64了 然后就可以使用啦。

到此，关于“html5如何画海报”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注亿速云网站，小编会继续努力为大家带来更多实用的文章！