• <acronym id="vmidc"></acronym>

    <acronym id="vmidc"></acronym>

    <pre id="vmidc"></pre>

    <track id="vmidc"></track>
  • <acronym id="vmidc"></acronym>
    Z 您現在的位置:首頁 > 手機軟件 > 系統工具> 像素頭像生成器app

    像素頭像生成器app

    |像素頭像生成器手機版下載

    應用大?。?/i>未知應用平臺:Andriod應用等級:

    應用語言:簡體中文更新時間:2017-10-10應用官網:

    像素頭像生成器軟件apk最新版下載,像素頭像生成器是一款非常好用的手機像素圖片生成APP,各種圖片幫你一鍵生成像素表情,快速在線制圖,讓你成為制圖大師,完全免費在線使用喲!快來優游下載體驗吧。

    像素頭像生成器軟件介紹

    1、包含各種不同的顏色;

    2、提供百分之80界面的繪圖區;

    3、快速制圖,小白用戶變大師;

    4、完全免費,下載即可永久使用。

    像素頭像生成器方法介紹

    只要三步,使用html5+js實現像素風頭像生成器

    html5的畫布給我們帶來了很大的空間,其實像素風格頭像生成器只是用到了畫方塊的方法。畫一個像素頭像,只要三步,1、解決像素點,2、解決像素點之間的關系,3、一次次地畫像素點。

    先畫個方塊

    其實在canvas上畫方塊非常簡單,只要通過js在頁面上取得一個畫布,然后再生成上下文,再定義畫筆,然后再往上畫就好了。

    比如:our browser does not support the HTML5 canvas tag.

    上面在html里面定義好了一個畫布,然后用js取到這個畫布對象。

    var c = document.getElementById("myCanvas");

    取到上下文,并且設置一些參數,畫下第一筆:一個小方塊:

    var ctx=c.getContext("2d");

    //把畫筆定義成綠色,

    ctx.fillStyle="green";

    //在(40,0) 這個 地方 畫下 長為10,寬也為10 的一個實心矩形

    ctx.fillRect(40,0,10,10);

    到這里,基礎的東西都有了,可以畫一個矩形了之后,要畫一個頭像,就只是用一些方塊做為頭像的像素點,就可以了,然后加入循環,在不同的地方畫下相同顏色,相同大小的方塊,就可以是一個頭像了。

    頭像,是要左右對稱的。

    這個也很簡單可以實現,比如我要在一塊 100*100 的畫布上 畫一些像素點為 5px大小的 方塊的時候, 如果在左邊(5,0) 的地方畫了一個方塊的話,與之對稱的右邊的坐標是: (100-5)-5px。把這個抽象成一個函數留作后用:

    //從一個點a 拿到對稱點

    //帶入imgwidth 與 penSize

    // 100 / 2 = 50

    function getSymmetry (a, imgWidth, penSize) {

    return imgWidth -a - penSize;

    }

    然后呢,從左到右畫方塊的話,最多畫多少次呢? 比如 100 的畫布,5px 大小的方塊的話,只要左邊畫最多10次就可以了,當然,是不能全部都給畫了,那樣子又全部把畫布給染了一遍色,很明顯,這樣子是不對的,所以呢,是需要一個生成比指定值小的隨機整數值的一個函數:

    //返回指定范圍以內的整數 傳入3返回 132

    function getRemodInt(alt) {

    return Math.floor(Math.random() * alt) + 1;

    }

    到這里,有了對稱點,有了在左邊畫多少次這個條件,還可以拿對稱點之后,是可以畫一行的方塊了的:

    (function(rmd){

    console.log(rmd);

    for (var i = 0; i < rmd; i++) {

    var x1 = getRemodIntByPenSize(imgWidth / 2, penSize);

    //console.log(x1);

    var x2 = getSymmetry(x1, imgWidth, penSize);

    ctx.fillRect(x1, yl, penSize, penSize);

    ctx.fillRect(x2, yl, penSize, penSize);

    }

    })(getRemodInt(imgWidth / penSize / 2));

    上面代碼里面的getRemodIntByPenSize這個函數是為了生成一個坐標點,能被畫筆大?。ǚ綁K大?。┱?,因為既然一個方塊做為一個像素點,是不能出現畫了半個像素點這種情況出現的。這個函數具體實現為:

    function getRemodIntByPenSize (alt, penSize) {

    var rmd = 0;

    while (true) {

    rmd = Math.floor(Math.random() * alt);

    if (rmd % penSize === 0) {

    return rmd ;

    }

    }

    }

    一行一行地畫,畫著畫著就畫完了。

    畫了一行之后,再畫一行就不是什么難事了,畫很多行也是可以的,基于剛才提到的像素點的原因,做循環時遞增值應為畫筆的大小。所以只要把上面畫一行的代碼用一個for包起來就 OK 了:

    for (var yl = 0;  yl <= imgWidth; yl += penSize) {

    (function(rmd){

    console.log(rmd);

    for (var i = 0; i < rmd; i++) {

    var x1 = getRemodIntByPenSize(imgWidth / 2, penSize);

    //console.log(x1);

    var x2 = getSymmetry(x1, imgWidth, penSize);

    ctx.fillRect(x1, yl, penSize, penSize);

    ctx.fillRect(x2, yl, penSize, penSize);

    }

    })(getRemodInt(imgWidth / penSize / 2));

    }

    到這里,基本上一個頭像是可以畫了的。

    完整的HTML在這里,

    ie不能直接把畫出來的東西直接另存為,所以加了把當前畫布上的內容轉為base64的格式,然后給一個的src,這樣子,就可以在ie下另存了。

    完整的html 里面還加入了 上一個頭像 的功能,人嘛,總有一種站在這山看那山高的心態的,所以作為一個好心的序員,提供一個“CTRL+Z”還是極好的。

    完整的html 是可以自定義頭像大小與畫筆大小的哦。

    軟件截圖
    • 像素頭像生成器app截圖欣賞
    • 像素頭像生成器app截圖欣賞
    • 像素頭像生成器app截圖欣賞
    相關下載
    下載地址
    網友評論

    Copyright ? 2017-2018 www.imi-precison.com/ All rights reserved 一九手機網游 版權所有

    備案號:閩ICP備12004242號-6  

    一九手機網游訂閱號
    韩国三级在线观看免费视频_人体艺术中的杂乱小说_亚洲在线播放欧美大胆色图_国产在线免费观看
  • <acronym id="vmidc"></acronym>

    <acronym id="vmidc"></acronym>

    <pre id="vmidc"></pre>

    <track id="vmidc"></track>
  • <acronym id="vmidc"></acronym>