html5海報(bào)怎么畫？實(shí)現(xiàn)發(fā)哪方面分享！

在生活中我們處處都可以看到很多不同的海報(bào)宣傳，那么今天我們就來(lái)講一下有關(guān)于：“html5海報(bào)怎么畫？實(shí)現(xiàn)發(fā)哪方面分享！ ”這個(gè)問(wèn)題的相關(guān)內(nèi)容！

首先我們老大告訴我有一個(gè)插件叫html2canvas、其作用就是可以將dom節(jié)點(diǎn)轉(zhuǎn)化成圖片，是個(gè)不錯(cuò)的東西。我試驗(yàn)了下、確實(shí)可以，但~這個(gè)插件有點(diǎn)大啊，為了滿足海報(bào)的這個(gè)需求引入這么大的東西感覺(jué)很虧?。?！所以，還是自己畫一個(gè)~

首先先上效果圖

當(dāng)當(dāng)當(dāng)當(dāng)~~~最后生成的海報(bào)中包括頭像和姓名與二維碼，當(dāng)然圖上的二維碼是百度的二維碼~最后生成base64用以分享到各大平臺(tái)。

廢話不多說(shuō)，上代碼 

<canvas id="myCanvas" width="750" height="1200" style="border:1px solid #d3d3d3;background:#ffffff;"></canvas>

dom節(jié)點(diǎn)很簡(jiǎn)單，生成個(gè)canvas標(biāo)簽隨意寫點(diǎn)屬性就可以了~

var canvas = document.getElementById("myCanvas");   //獲取canvas節(jié)點(diǎn)
function imageToCanvas(canvas,url1,url2,code) {      //傳入canvas節(jié)點(diǎn) 背景圖url1  頭像url2 二維碼code
    var ctx = canvas.getContext("2d");  
    var img1 = new Image();                               
    img1.src = url1;                     //前面的不解釋了，生成個(gè)圖片
    img1.onload = function(){ 
        ctx.drawImage(img1,0,0);              //當(dāng)圖片加載完成后 賦到畫布上 從0 0 開(kāi)始。
        var img2 = new Image();
         img2.src = url2;
         img2.onload = function(){
          ctx.save();                            //保存當(dāng)前畫布狀態(tài)
          ctx.arc(374, 134, 44, 0, 2 * Math.PI);    //剪切操作 將正方形的頭像切成圓的
          // 從畫布上裁剪出這個(gè)圓形
          ctx.clip();                             //進(jìn)行裁剪
          ctx.drawImage(img2, 330, 90, 88, 88);   //放入img2 在330 90坐標(biāo)處     大小 88
          ctx.restore();                           //釋放畫布狀態(tài)
          ctx.font="28px Arial";
          ctx.textAlign="center";
          ctx.fillStyle ='#FFFFFF';               //前面是設(shè)置文字 屬性設(shè)為居中
          ctx.fillText("你叫神馬名字",375,220);     //文字 這里是寫死的 實(shí)際中多傳個(gè)參數(shù)就ok
          var img3 = new Image();
          img3.src = code;
          img3.onload = function() {
              ctx.drawImage(img3,136,554,478,478);      //同理加圖像
              var imgCode = convertCanvasToImage(canvas);    //將圖片轉(zhuǎn)為base64
              console.log(imgCode.getAttribute('src'))
          }

         }
    }

}
imageToCanvas(canvas,"1.png",'3.jpeg','code.png');            //初始化


function convertCanvasToImage(canvas) {
    var image = new Image(); 
    image.src = canvas.toDataURL("image/png");            //canvas轉(zhuǎn)化為img
    return image;
}

這樣就可以得到一個(gè)base64了 然后就可以使用啦。

以上就是有關(guān)于：“html5海報(bào)怎么畫？實(shí)現(xiàn)發(fā)哪方面分享！ ”這個(gè)問(wèn)題的相關(guān)內(nèi)容，當(dāng)然更多有關(guān)于html5這個(gè)方面的相關(guān)內(nèi)容我們都可以在W3Cschool中進(jìn)行學(xué)習(xí)和了解！