小白记Canvas实现的一个小玩意 - 你的名字头像生成

小白记Canvas实现的一个小玩意 - 你的名字头像生成

技术杂谈小彩虹2021-08-15 22:44:48190A+A-

喂,你是谁啊?

DEMO 源码文章末尾

Image text

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();

GITHUB
第一次写文章,如果有不对的地方请大家帮忙指出来.

点击这里复制本文地址 以上内容由权冠洲的博客整理呈现,请务必在转载分享时注明本文地址!如对内容有疑问,请联系我们,谢谢!

支持Ctrl+Enter提交

联系我们| 本站介绍| 留言建议 | 交换友链 | 域名展示
本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除

权冠洲的博客 © All Rights Reserved.  Copyright quanguanzhou.top All Rights Reserved
苏公网安备 32030302000848号   苏ICP备20033101号-1
本网站由 提供CDN/云存储服务

联系我们