canvas入門實戰(zhàn)--邀請卡生成與下載

李義發(fā)布于2019-08-29 14:02 / 3306人閱讀

摘要：大家看這篇文章之前，要了解的一些基礎(chǔ)，也要看著了解一些的教程，菜鳥教程邀請卡實例邀請卡自動生成這個會有的，畢竟有時候，很多邀請卡都是一樣的，就是被邀請的人不一樣而已，也就是說，整個邀請卡，就是一個名字不一樣，那么下面。代表是否是批量下載。

1.前言

寫了很多的javascript和css3的文章，是時候?qū)懸黄猚anvas的了。canvas是html5提供的一個新的功能！至于作用，就是一個畫布。然后畫筆就是javascript。canvas的用途非常的廣，特別是html5游戲以及數(shù)據(jù)可視化這兩個方面。現(xiàn)在canvas給我的感覺就和css3一樣，可以不用太厲害，但是必須要會基礎(chǔ)的用法。但是以后對canvas的需求，肯定會越來越大。所以canvas很值得學(xué)習(xí)，而且學(xué)好canvas，就是很好的一個加分項。對于這篇文章，我也是以canvas初學(xué)者的角度寫的，會有很多改善的地方。如果大家覺得我有什么可以改善的，或者建議，歡迎指點迷津！代碼已上傳github，需要的歡迎star(downloadImg)。

大家看這篇文章之前，要了解javascript的一些基礎(chǔ)，也要看著了解一些canvas的api（canvas-MSN教程，canvas菜鳥教程）

2.邀請卡實例

邀請卡自動生成這個會有的，畢竟有時候，很多邀請卡都是一樣的，就是被邀請的人不一樣而已，也就是說，整個邀請卡，就是一個名字不一樣，那么下面。就寫一套代碼，根據(jù)名字生成邀請卡！

2-1.運行效果

html代碼



    
    下載圖片
    



    
        
            
                畫布尺寸
                
            
            
                背景圖片
                
            
            
                用戶名
                
                    
                
            
            
                用戶名x坐標(biāo)
                
                    

                    居中顯示
                
            
            
                用戶名y坐標(biāo)
                
                    

                    居中顯示
                
            
            
                用戶名字體大小
                
            
            
                文字顏色
                
            
            
                圖片類型

效果如圖，那么大家細(xì)想一下，關(guān)于一張邀請卡，有什么東西是需要改變的！看到上圖相比不難發(fā)現(xiàn)！有如下需要改變的屬性：圖片的大小，圖片，用戶名，用戶名的坐標(biāo)（x,y,x軸是否居中，y軸是否居中），用戶名字體的大小，用戶名字體的顏色，以及下載圖片的類型。

這樣就得到了如下的參數(shù)（大家看到有些參數(shù)是有值的，可以想成默認(rèn)值就行了）

var option = {
    img: "111.jpg",
    width: 500,
    height: 350,
    fontSize: "20px Microsoft YaHei",
    color: "black",
    text: "守候",
    imgType: "jpg",
    x: 30,
    y: 30,
    xCenter: false,
    yCenter: false,
};

2-2.步驟 1.初步效果

根據(jù)上面的參數(shù)，先初步畫一個效果，代碼基本都是一個寫法，沒什么技巧

//畫圖
function draw(obj) {
    var canvas = document.getElementById("thecanvas");
    //畫布大小
    canvas.width = obj.width;
    canvas.height = obj.height;
    //設(shè)置圖片
    var img = new Image();
    img.src = obj.img;
    var ctx = canvas.getContext("2d");
    //設(shè)置字體的坐標(biāo)
    var _x = obj.x, _y = obj.y;
    //是否居中顯示
    if (obj.xCenter) {
        _x = obj.width / 2;
    }
    if (obj.yCenter) {
        _y = obj.height / 2;
    }
    //圖片加載后
    img.onload = function () {
        //先畫圖片
        ctx.drawImage(img, 0, 0);
        //設(shè)置文字的大小
        ctx.font = obj.fontSize;
        //設(shè)置文字的顏色
        ctx.fillStyle = obj.color;
        //設(shè)置文字坐標(biāo)
        if (obj.xCenter) {
            ctx.textAlign = "center";
        }
        //畫文字
        ctx.fillText(obj.text, _x, _y);
    };
}

window.onload = function () {
    draw(option);
}

2.動態(tài)改變參數(shù)

看到圖已經(jīng)畫好了，工作其實已經(jīng)完成一半了！

下面就是動態(tài)改變參數(shù)！這一步其實很簡單。
首先，改變畫布的尺寸

//畫布尺寸
//獲取按鈕
var size = document.getElementById("size");
size.addEventListener("blur", function () {
    //根據(jù)空格，區(qū)分高寬
    var _width = parseInt(size.value.replace(/(^s*)|(s*$)/g, "").split(/s+/)[0]),
        _height = parseInt(size.value.replace(/(^s*)|(s*$)/g, "").split(/s+/)[1]);
    //把參數(shù)的width和height改掉
    option.width = _width || 100;
    option.height = _height || 100;
    //重新畫圖
    draw(option);
});

上面代碼設(shè)置了，只要輸入框失去了焦點，就會改變畫布的大小，下面來運行下，看下效果（gif圖差強(qiáng)人意，大家看懂就好）

canvas沒有層級的說法，只要改canvas，都要重繪。哪怕就是一個字移動一個像素。

做好了這個，下面做選擇圖片的功能！

//選擇圖片
//獲取圖片控件
var file = document.getElementById("file"), imagesFile, imageData;
file.addEventListener("change", function (e) {
    //獲取圖片
    imagesFile = e.target.files[0];
    //把圖片轉(zhuǎn)base64
    var reader = new FileReader();
    reader.readAsDataURL(imagesFile);
    //圖片加載后
    reader.onload = function (e) {
        //設(shè)置option的img屬性，再沖洗年繪制
        imageData = this.result;
        option.img = imageData;
        draw(option);
    }
});

下面開始改文字，用戶名這個有點不一樣，我以空格分割。如果輸入多個用戶名，以第一個用戶名重繪。下面代碼，注釋就不寫了，還是和上面的邏輯一樣！

//用戶名
var userName = document.getElementById("user-name");
userName.addEventListener("blur", function () {
    var _text = userName.value.replace(/(^s*)|(s*$)/g, "").split(/s+/);
    option.text = _text[0];
    draw(option);
});

下面開始用戶名的坐標(biāo)，代碼方面，也是改option的相關(guān)屬性

    optionXCenter.addEventListener("change", function () {
        if (optionXCenter.checked) {
            option.xCenter = true;
        }
        else {
            option.xCenter = false;
            option.x = parseInt(optionX.value);
        }
        draw(option);
    });
    //縱坐標(biāo)
    var optionY = document.getElementById("text-option-y");
    optionY.value = option.y;
    var optionYCenter = document.getElementById("is-center-y");
    optionY.addEventListener("input", function () {
        if (optionYCenter.checked) {
            option.yCenter = true;
        }
        else {
            option.yCenter = false;
            option.y = parseInt(optionY.value);
        }
        draw(option);
    });
    //是否垂直居中顯示
    optionYCenter.addEventListener("change", function () {
        if (optionYCenter.checked) {
            option.yCenter = true;
        }
        else {
            option.yCenter = false;
            option.y = parseInt(optionY.value);
        }
        draw(option);
    });

是否水平居中顯示

其他的屬性，字體大小和顏色，基本是一樣的代碼，運行的效果圖我不放了！

//字體顏色
var textColor = document.getElementById("text-color");
textColor.addEventListener("blur", function () {
    textColor.value === "" ? option.color = "#fff" : option.color = "#" + textColor.value;
    draw(option);
});
//字體大小
var textSize = document.getElementById("text-size");
textSize.addEventListener("input", function () {
    textSize.value === "" ? option.fontSize = "20px Microsoft YaHei" : option.fontSize = textSize.value + "px Microsoft YaHei";
    draw(option);
});

3.按鈕操作

效果預(yù)覽

就是預(yù)覽當(dāng)前canvas的一個效果，這個就很簡單了，就是新開一個窗口，然后把圖片寫進(jìn)去而已

//預(yù)覽圖片
function saveImageInfo() {
    var mycanvas = document.getElementById("thecanvas");
    //生成圖片
    var image = mycanvas.toDataURL("image/png");
    var w = window.open("about:blank", "image from canvas");
    //把圖片新進(jìn)新的窗口
    w.document.write("");
}
var saveButton = document.getElementById("save-image");
saveButton.addEventListener("click", saveImageInfo);

下載當(dāng)前圖片

下載圖片這個，基本也是寫法的，都是些記憶的東西

//圖片類型
var imgType = document.getElementById("img-type");
imgType.addEventListener("change",function () {
    option.imgType=this.value;
});
//下載圖片
function downloadImg(fileName) {
    //獲取canvas
    var myCanvas = document.getElementById("thecanvas");
    //設(shè)置圖片類型
    var image = myCanvas.toDataURL("image/" + option.imgType).replace("image/" + option.imgType, "image/octet-stream");
    var save_link = document.createElementNS("http://www.w3.org/1999/xhtml", "a");
    save_link.href = image;
    //設(shè)置下載圖片的名稱
    save_link.download = fileName + "." + option.imgType;
    //下載圖片
    var event = document.createEvent("MouseEvents");
    event.initMouseEvent("click", true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
    save_link.dispatchEvent(event);
}

批量下載圖片

這個復(fù)雜一點，但也不難，下面一步一步來！

1.首先批量導(dǎo)出，那么用戶名我這里是使用空格分割，那么現(xiàn)在我在option里面，弄一個字段textAll，所有文字的集合。all代表是否是批量下載。fn屬性代表回調(diào)函數(shù)

//批量導(dǎo)出
var downloadAll = document.getElementById("download-all");
downloadAll.addEventListener("click", function () {
    var _text = userName.value.replace(/(^s*)|(s*$)/g, "").split(/s+/);
    option.textAll = _text;
    option.all = true;
    option.fn = downloadImg;
    draw(option);
});

2.然后修改繪制的函數(shù)draw，判斷是否是全部繪制的情況！

function draw(obj) {
    var canvas = document.getElementById("thecanvas");
    //畫布大小
    canvas.width = obj.width;
    canvas.height = obj.height;
    //設(shè)置圖片
    var img = new Image();
    img.src = obj.img;
    var ctx = canvas.getContext("2d");
    //設(shè)置字體的坐標(biāo)
    var _x = obj.x, _y = obj.y;
    //是否居中顯示
    if (obj.xCenter) {
        _x = obj.width / 2;
    }
    if (obj.yCenter) {
        _y = obj.height / 2;
    }
    //圖片加載后
    img.onload = function () {
        //是否是全部打印
        if(obj.all){
            //遍歷textAll
            for(var i=0;i


3.小結(jié)
關(guān)于canvas入門的第一篇文章，就寫到這里了。寫完之后，也發(fā)現(xiàn)自己對canvas的也是有很多的不懂！上文的這例子，知識canvas很簡單的一個入門實例。canvas如果深入學(xué)習(xí)，能做到很多讓人驚訝的效果，這個得以后要加強(qiáng)學(xué)習(xí)，如果發(fā)現(xiàn)些值得記錄的知識，我也會寫文章。canvas是一個非常值得學(xué)習(xí)的知識，也是很有趣的一個知識。期待與大家有更多的交流和學(xué)習(xí)！
-------------------------華麗的分割線--------------------
想了解更多，關(guān)注關(guān)注我的微信公眾號：守候書閣

云服務(wù)器 GPU云服務(wù)器 webrtc入門與實戰(zhàn) tensorflow入門與實戰(zhàn) linux入門與實戰(zhàn)經(jīng)典 webrtc入門與實戰(zhàn)視頻教程

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/112883.html

發(fā)表評論

登陸后可評論

0條評論

李義

男|高級講師

我要關(guān)注我要私信

TA的文章

【python開發(fā)】1. __init__.py與導(dǎo)包

閱讀 3316·2021-11-25 09:43
性能測試工具-Jmeter使用方法

閱讀 1304·2021-11-23 09:51
Linode：新用戶注冊送100美元,11個數(shù)據(jù)中心云服務(wù)器$5/月起

閱讀 3609·2021-10-11 11:06
Adobe Flash Player 34.0.0.184 特別版（2021/08/10發(fā)布）

閱讀 3697·2021-08-31 09:41
前端模塊化規(guī)范

閱讀 3597·2019-08-30 15:53
三欄布局中間自適應(yīng)總結(jié)

閱讀 3509·2019-08-30 15:53
前端小報 - 201903月刊

閱讀 965·2019-08-30 15:43
canvas入門實戰(zhàn)--邀請卡生成與下載

閱讀 3307·2019-08-29 14:02

国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

canvas入門實戰(zhàn)--邀請卡生成與下載

相關(guān)文章