您好,登錄后才能下訂單哦!
這篇文章主要介紹“html5如何畫海報(bào)”,在日常操作中,相信很多人在html5如何畫海報(bào)問題上存在疑惑,小編查閱了各式資料,整理出簡單好用的操作方法,希望對大家解答”html5如何畫海報(bào)”的疑惑有所幫助!接下來,請跟著小編一起來學(xué)習(xí)吧!
廢話不多說,上代碼
<canvas id="myCanvas" width="750" height="1200" ></canvas>
dom節(jié)點(diǎ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 開始。
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)”的學(xué)習(xí)就結(jié)束了,希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí),快去試試吧!若想繼續(xù)學(xué)習(xí)更多相關(guān)知識,請繼續(xù)關(guān)注億速云網(wǎng)站,小編會繼續(xù)努力為大家?guī)砀鄬?shí)用的文章!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。