小白記Canvas實現的一個小玩意 - 你的名字頭像生成

喂，你是誰啊？

Demo 源碼文章末尾

HTML結構

<div class="container"> <div class="container-wrap"> <canvas id="canvas" width="250" height="250"></canvas> <!-- Control --> <section class="control"> <select id="control-select"> <option value="立花瀧">立花瀧</option> <option value="宮水三葉">宮水三葉</option> </select> <input type="text" placeholder="要寫的字" id="control-name" maxlength="3"/> <button id="control-create">生成圖片</button> <p class="control-result"></p> </section> </div></div>

頁面交互

獲取相關的DOM元素

const DOM = { canvas: document.getElementById("canvas"), ctx: document.getElementById("canvas").getContext("2d"), select: document.getElementById("control-select"), createBtn: document.getElementById("control-create"), oname: document.getElementById("control-name"), oresult: document.getElementsByClassName("control-result")[0],}

定義兩個人的圖片

var boyImg = new Image(), girlImg = new Image();boyImg.src = "images/long.jpg";girlImg.src = "images/sanye.jpg";

把常用的工具方法寫在一個工具類里

const UTILS = (function(){ let clearForm = () => { // 清空表單 DOM.oname.value = ""; DOM.oresult.innerHTML = ""; } return { clearForm: clearForm, }})();

把事件綁定DOM集合寫在一個函數內

var eventBind = () => { // 初始畫布渲染 boyImg.onload = () => { DOM.ctx.drawImage(boyImg,0,0,250,250); } // 選擇人物 DOM.select.onchange = () => { UTILS.clearForm(); if(DOM.select.value === "立花瀧"){ DOM.ctx.drawImage(boyImg,0,0,250,250); }else if(DOM.select.value === "宮水三葉"){ DOM.ctx.drawImage(girlImg,0,0,250,250); }else{ alert("請求非法"); } } // 畫布實時更新 DOM.oname.oninput = () => { imageHandle(); } // 生成圖片處理 DOM.createBtn.onclick = function(){ if(DOM.oname.value == ""){ alert("喂，真的什麼都不寫嗎？"); }else{ DOM.createBtn.innerHTML = "生成中."; DOM.createBtn.setAttribute("disabled","disabled"); DOM.createBtn.style.cursor = "not-allowed"; setTimeout(function(){ imageHandle(); DOM.createBtn.innerHTML = "生成圖片"; DOM.createBtn.removeAttribute("disabled"); DOM.createBtn.style.cursor = "pointer"; DOM.oresult.innerHTML = "生成成功，<a href="+DOM.canvas.toDataURL("image/png")+" download=avatar>點擊下載</a>" },2000); } }}

編寫圖片處理函數

function imageHandle(){ // 圖片處理 let text = DOM.oname.value; DOM.ctx.font = "18px 宋體"; if(DOM.select.value === "立花瀧"){ DOM.ctx.drawImage(boyImg,0,0,250,250); drawText(text,117,60,1); }else if(DOM.select.value === "宮水三葉"){ DOM.ctx.drawImage(girlImg,0,0,250,250); drawText(text,105,50,1); }else{ alert("請求非法！"); }}

編寫文字處理函數

function drawText(t,x,y,w){ // 文字處理 var chr = t.split(""); var temp = ""; var row = []; DOM.ctx.textBaseline = "middle"; for(var a = 0; a < chr.length; a++){ if( !DOM.ctx.measureText(temp).width < w ){ row.push(temp); temp = ""; } temp += chr[a]; } row.push(temp); for(var b = 0; b < row.length; b++){ DOM.ctx.fillText(row[b],x,y+(b+1)*20); }}

入口函數

var main = () => { // 入口 eventBind();}main();

Clayeo/yourname-avatargithub.com

第一次寫文章，如果有不對的地方請大家幫忙指出來.

推薦閱讀：