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

資訊專欄INFORMATION COLUMN

canvas入門實戰--邀請卡生成與下載

jay_tian / 2938人閱讀

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

1.前言

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

大家看這篇文章之前,要了解javascript的一些基礎,也要看著了解一些canvas的api(canvas-MSN教程,canvas菜鳥教程)
2.邀請卡實例

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

2-1.運行效果

html代碼



    
    下載圖片
    


畫布尺寸
背景圖片
用戶名
用戶名x坐標

居中顯示

用戶名y坐標

居中顯示

用戶名字體大小
文字顏色
圖片類型

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

這樣就得到了如下的參數(大家看到有些參數是有值的,可以想成默認值就行了)

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.初步效果

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

//畫圖
function draw(obj) {
    var canvas = document.getElementById("thecanvas");
    //畫布大小
    canvas.width = obj.width;
    canvas.height = obj.height;
    //設置圖片
    var img = new Image();
    img.src = obj.img;
    var ctx = canvas.getContext("2d");
    //設置字體的坐標
    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);
        //設置文字的大小
        ctx.font = obj.fontSize;
        //設置文字的顏色
        ctx.fillStyle = obj.color;
        //設置文字坐標
        if (obj.xCenter) {
            ctx.textAlign = "center";
        }
        //畫文字
        ctx.fillText(obj.text, _x, _y);
    };
}

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

2.動態改變參數

看到圖已經畫好了,工作其實已經完成一半了!

下面就是動態改變參數!這一步其實很簡單。
首先,改變畫布的尺寸

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

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

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

做好了這個,下面做選擇圖片的功能!

//選擇圖片
//獲取圖片控件
var file = document.getElementById("file"), imagesFile, imageData;
file.addEventListener("change", function (e) {
    //獲取圖片
    imagesFile = e.target.files[0];
    //把圖片轉base64
    var reader = new FileReader();
    reader.readAsDataURL(imagesFile);
    //圖片加載后
    reader.onload = function (e) {
        //設置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);
});

下面開始用戶名的坐標,代碼方面,也是改option的相關屬性

    optionXCenter.addEventListener("change", function () {
        if (optionXCenter.checked) {
            option.xCenter = true;
        }
        else {
            option.xCenter = false;
            option.x = parseInt(optionX.value);
        }
        draw(option);
    });
    //縱坐標
    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.按鈕操作

效果預覽

就是預覽當前canvas的一個效果,這個就很簡單了,就是新開一個窗口,然后把圖片寫進去而已

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

下載當前圖片

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

//圖片類型
var imgType = document.getElementById("img-type");
imgType.addEventListener("change",function () {
    option.imgType=this.value;
});
//下載圖片
function downloadImg(fileName) {
    //獲取canvas
    var myCanvas = document.getElementById("thecanvas");
    //設置圖片類型
    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;
    //設置下載圖片的名稱
    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);
}

批量下載圖片

這個復雜一點,但也不難,下面一步一步來!

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

//批量導出
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.然后修改繪制的函數draw,判斷是否是全部繪制的情況!

function draw(obj) {
    var canvas = document.getElementById("thecanvas");
    //畫布大小
    canvas.width = obj.width;
    canvas.height = obj.height;
    //設置圖片
    var img = new Image();
    img.src = obj.img;
    var ctx = canvas.getContext("2d");
    //設置字體的坐標
    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.小結

關于canvas入門的第一篇文章,就寫到這里了。寫完之后,也發現自己對canvas的也是有很多的不懂!上文的這例子,知識canvas很簡單的一個入門實例。canvas如果深入學習,能做到很多讓人驚訝的效果,這個得以后要加強學習,如果發現些值得記錄的知識,我也會寫文章。canvas是一個非常值得學習的知識,也是很有趣的一個知識。期待與大家有更多的交流和學習!

-------------------------華麗的分割線--------------------
想了解更多,關注關注我的微信公眾號:守候書閣

文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。

轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/92109.html

相關文章

  • canvas入門實戰--邀請生成下載

    摘要:大家看這篇文章之前,要了解的一些基礎,也要看著了解一些的教程,菜鳥教程邀請卡實例邀請卡自動生成這個會有的,畢竟有時候,很多邀請卡都是一樣的,就是被邀請的人不一樣而已,也就是說,整個邀請卡,就是一個名字不一樣,那么下面。代表是否是批量下載。 1.前言 寫了很多的javascript和css3的文章,是時候寫一篇canvas的了。canvas是html5提供的一個新的功能!至于作用,就是一...

    李義 評論0 收藏0
  • 重磅 | 完備的 AI 學習路線,最詳細的資源整理!

    摘要:是你學習從入門到專家必備的學習路線和優質學習資源。的數學基礎最主要是高等數學線性代數概率論與數理統計三門課程,這三門課程是本科必修的。其作為機器學習的入門和進階資料非常適合。書籍介紹深度學習通常又被稱為花書,深度學習領域最經典的暢銷書。 showImg(https://segmentfault.com/img/remote/1460000019011569); 【導讀】本文由知名開源平...

    荊兆峰 評論0 收藏0
  • 7月份前端資源分享

    摘要:更多資源請文章轉自月份前端資源分享的作用數組元素隨機化排序算法實現學習筆記數組隨機排序個變態題解析上個變態題解析下中的數字前端開發筆記本過目不忘正則表達式聊一聊前端存儲那些事兒一鍵分享到各種寫給剛入門的前端工程師的前后端交互指南物聯網世界的 更多資源請Star:https://github.com/maidishike... 文章轉自:https://github.com/jsfr...

    pingan8787 評論0 收藏0

發表評論

0條評論

最新活動
閱讀需要支付1元查看
<