canvas API ，通俗的canvas基礎知識（五）

時間 2019-11-11

標籤 canvas api 通俗基礎知識简体版

原文原文鏈接

前幾期講的都是路徑圖形的繪圖，這節咱們要講的是如何在畫布上操做圖片，由於圖形畫不了漂亮妹子（畫圖高手忽略不計），想畫美女怎麼辦？跟我來:html

想要在畫布中插入一張圖片，咱們須要的方法是這位大俠：html5

drawImage() 在畫布上繪製圖像，畫布或視頻web

這位大俠可謂是武功高強啊，其絕學之多，內力之深，堪稱高手中的高手，那咱們來看看它都有些什麼絕學：canvas

祕籍一：數組

drawImage(img,x,y) 在畫布上定位一張圖片瀏覽器

參數：img 表示引入的圖片對象，x,y表示引入的座標框架

ps:img在這裏表示的是圖片的對象而不是圖片的路徑，說明不能直接來引用圖片，而是須要操做DOM的方式來引用dom

上面的提示說了圖片的特殊性，那咱們該如何來獲取圖片呢？咱們先來一個最簡單的：ide

<canvas width="500" height="400" id="canvas">
        <span>親，您的瀏覽器不支持canvas，換個瀏覽器試試吧！</span>
</canvas>
<img src="2.jpg" alt="" id="img">

咱們在頁面上放一張圖（當年的奶茶妹，當年的哦），而後獲取這張圖，再放到畫布上this

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var oImg = document.getElementById("img");
ctx.drawImage(oImg,10,10);

看，在畫布外的奶茶妹就到咱們的畫布上去了，惋惜的是，如今的奶茶妹已經不是當前的奶茶妹了，有同窗會說，我只想讓個人奶茶妹在個人畫布上（怎麼是個人奶茶妹），不想讓她在別的地方被看見，我要怎麼作呢？機靈的同窗必定想獲得，我把外面的圖片隱藏起來不就好了嗎？直接隱藏行不行呢？

<img src="2.jpg" alt="" id="img" style="display:none;">

右邊的奶茶妹不見了，只有個人畫布上有能夠的奶茶妹，恩恩，這是我想要的，說明這樣有這個圖片在頁面上，可以獲取到這個DOM元素便可，至於圖片到底顯不顯示，不重要，那圖片的隱藏方式就不少了，自身隱藏，放到一個div中div隱藏，放到canvas標籤中（由於支持canvas的瀏覽器裏面的東西是不顯示的）等等，也能夠用純js的方式來添加圖片：

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var aImg = new Image();
aImg.src = '2.jpg';
ctx.onload = function(){
    ctx.drawImage(aImg,10,10,400,300);
}

祕籍二：

drawImage(img,x,y,w,h) 在畫布上定位圖片，並規定圖片的寬高

參數：img 表示引入的圖片對象，x,y表示引入的座標，w,h表示規定圖片的大小

有同窗會說，奶茶妹是好，可是個人畫布過小，奶茶妹太大（哪裏大了），圖片太大，都基本上把個人畫布都佔滿了，若是我在畫布上畫別的圖形，豈不是玷污了奶茶妹了，能把她變小嗎？哈哈，drawImage具有孫悟空的變換本領，能大能小，不信，看這裏：

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var oImg = document.getElementById("img");
ctx.drawImage(oImg,10,10,200,150);

看，上面的奶茶妹一會兒就變小了，哎呀，過小了，看不清楚，並且我只想看奶茶妹，不想看到別的糟同窗，能夠嗎？固然能夠

祕籍三

drawImage(img,sX,sY,sWidth,sHeight,x,y,width,height) 剪切畫布，並在畫布上定位被剪切的部分

參數：img 表示引入的圖片對象，sX,sY表示剪切的其實座標，sWidth,sHeight表示剪切的寬度和高度，x,y表示在畫布上放置圖片的座標，width,height表示須要使用的圖片的寬高

上面的參數雖多，可是仍是很好理解的，咱們來看看如何將奶茶妹剪切下來：

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var oImg = document.getElementById("img");
ctx.drawImage(oImg,150,0,150,300,10,10,400,300);

納裏，奶茶妹怎麼變成了胖子？再看一下參數，發現此時最後面的width和height已和前面的w,h表明的意思不同了，如今的表示裁剪下來的圖片須要顯示多大，若是比裁剪的寬高大，則會被拉伸，比裁剪的寬高小，則會被縮小，恩，咱們調成跟裁剪尺寸同樣看一下：

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var oImg = document.getElementById("img");
ctx.drawImage(oImg,150,0,150,300,10,10,150,300);

對對，就是這樣的，後面的x，y表示裁剪的圖片顯示的位置，咱們調到中間看看

ctx.drawImage(oImg,150,0,150,300,150,10,150,300);

因此在使用裁剪功能的時候，要特別注意，圖片的座標和寬高和原來的意思有區別了

祕籍四

drawImage(video,x,y,w,h) 在畫布上定位視頻，並規定視頻的寬高

參數：video表示引入是視頻對象，x,y表示視頻引入的座標，w,h表示規定視頻的大小

其實這裏跟引入圖片是同樣的，只不過它是能夠引入視頻的，可是這裏的引入只是視頻的某一幀，因此，當咱們直接引入時，是沒有什麼反應的：

<canvas width="500" height="400" id="canvas">
        <span>親，您的瀏覽器不支持canvas，換個瀏覽器試試吧！</span>
    </canvas>
    <video id="video1" controls width="270">
      <source src="http://www.w3school.com.cn/example/html5/mov_bbb.mp4" type='video/mp4'>
      <source src="http://www.w3school.com.cn/example/html5/mov_bbb.ogg" type='video/ogg'>
      <source src="http://www.w3school.com.cn/example/html5/mov_bbb.webm" type='video/webm'>
    </video>

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var oVideo = document.getElementById("video1");
ctx.drawImage(oVideo,10,10,270,135);

當視頻設置爲autoplay時：

能夠看到，右側視頻在播放，左側沒有什麼反應，那怎麼來播放視頻呢？咱們能夠加一個定時器，而後每隔20秒執行一次繪畫，這樣一幀一幀的執行，連續起來就是一個視頻了，其實視頻的原理也是如此：

var canvas = document.getElementById("canvas");
        var ctx = canvas.getContext("2d");
        var oImg = document.getElementById("img");
        var oVideo = document.getElementById("video1");
        var timer = setInterval(function(){
            ctx.drawImage(oVideo,10,10,270,135);
        },20)

不想讓畫布外的視頻顯示的方法跟圖片是同樣的，這裏我就不細說了

除了drawImage具備裁剪功能外，還有一個方法能夠裁剪——clip()，不一樣的是drawImage是裁剪圖片，而clip只能裁剪圖形，咱們具體來看一下clip吧：

clip() 從原始畫布中剪切任意形狀和尺寸

ps:一旦剪切了某個區域，則全部以後的繪圖都會被限制在被剪切的區域內（不能訪問畫布上的其餘區域）。您也能夠在使用 clip() 方法前經過使用 save() 方法對當前畫布區域進行保存，並在之後的任意時間對其進行恢復（經過 restore() 方法）。

提示這裏很重要，必定要看清楚，就比如是一張很大的油畫布，如今咱們用一個木框架子框一部分，而後就只能在這個框裏畫畫了，框外面的就不能來畫，恩，就是這個意思，當咱們用restore()方法恢復畫布是時候，就比如是把木框架子取掉了，這樣就能夠在別的地方畫了，固然畫好的這部分就不要動了

舉個栗子：

不用clip裁剪：

ctx.arc(200, 200, 80, (Math.PI/180)*0, (Math.PI/180)*360, false);
ctx.fill();
ctx.beginPath();
ctx.fillStyle = 'green';
ctx.arc(150, 150, 100, (Math.PI/180)*0, (Math.PI/180)*360, false);
ctx.fill();

使用clip裁剪：

ctx.arc(200, 200, 80, (Math.PI/180)*0, (Math.PI/180)*360, false);
ctx.clip();
ctx.fill();
ctx.beginPath();
ctx.fillStyle = 'green';
ctx.arc(150, 150, 100, (Math.PI/180)*0, (Math.PI/180)*360, false);
ctx.fill();

能夠比較看出，後面畫的圓只顯示在裁剪的圓的範圍中，其餘的都不見了，再看一個例子：

ctx.fillRect(50,50,200,100);
ctx.clip();
ctx.beginPath();
ctx.fillStyle = 'green';
ctx.fillRect(100,100,200,100);

咱們將圓改爲實心的矩形，且是用的fillRect，而不是用fill，rect，結果是：

只顯示第一個矩形，第二個矩形貌似不見了，而咱們分開寫：

//不用clip裁剪
ctx.rect(50,50,200,100);
ctx.fill();
ctx.beginPath();
ctx.fillStyle = 'green';
ctx.fillRect(100,100,200,100);

//使用clip裁剪
ctx.rect(50,50,200,100);
ctx.fill();
ctx.clip();
ctx.beginPath();
ctx.fillStyle = 'green';
ctx.fillRect(100,100,200,100);

//第一個矩形不填充，只畫路徑
ctx.rect(50,50,200,100);
ctx.clip();
ctx.beginPath();
ctx.fillStyle = 'green';
ctx.fillRect(100,100,200,100);

//將clip放在第二個矩形
ctx.rect(50,50,200,100);
ctx.fill();
ctx.beginPath();
ctx.fillStyle = 'green';
ctx.rect(100,100,200,100);
ctx.clip();
ctx.fill();

上面的4張圖分別代碼上面的4段代碼的效果，從這4組對比咱們能夠看出：

第一：裁剪的路徑必須在被裁剪圖形的前面申明，若是在後面申明，則會沒有效果或只有第一個圖形顯示；

第二：若是前面的裁剪區域要是沒有填充的話，顯示的部分就要2圖形相交的部分，可是繪圖區域仍是裁剪部分的區域

下面要講的是像素操做，相對來講比較複雜，須要你們的強大大腦來腦補和理解，何爲像素操做？咱們說任何在屏幕上顯示的圖形，圖片，畫面等等都是由像素構成的，最好理解的就是戶外大屏幕的畫面了，由於戶外大屏幕分辨率比較小，相比之下像素的顆粒就比較大，能夠清晰的看到畫面是又密密麻麻的像素來顯示的，當戶外大屏幕的屏幕有部分花了的話，會看到呈現的畫面就會在花掉的部分顯示成別的顏色，很明顯，對於咱們的電腦顯示器也是一個原理！

那麼像素是經過什麼來獲取的呢？咱們來一一介紹：

getImageData(x,y,w,h) 拷貝畫布指定矩形的像素數據

參數：x,y表示開始複製的左上角的座標 w,h表示將要複製的區域大小

參數很好理解，就是在什麼地方複製多大一個地方，並且它返回一個ImageData對象，ImageData對象裏面包含了幾個參數：

data：數組集合 width ：對象的寬度 height：對象的高度

後面2個好理解，這個data集合究竟是什麼呢？咱們來舉個栗子：

ctx.fillRect(0,0,100,100);
//獲取矩形框的像素
var oImg = ctx.getImageData(0,0,100,100);
console.log(oImg);
console.log(oImg.data)
console.log(oImg.data.length)

咱們畫了一個100*100的實現矩形，而後獲取它的像素，而後分別查看了他們表明的意思，能夠看到一個頗有意思的東西，就是100*100的矩形的像素點應該是10000個像素，爲何它的長度是40000，這個咱們能夠在data數組中能夠看到端倪，一個像素點是由rgba構成的：

r : 0-255 黑-白

g : 0-255 黑-白

b : 0-255 黑-白

a : 0-255 透明-不透明

也就是說，一個像素是用這4個值組成的，那麼10000個像素的長度天然就是40000了，並且對應的值在console中也能看到，好了，理解了這一點，那麼就裏像素操做不遠了！

除了咱們在已知的地方去獲取像素外，咱們能不能本身來創造像素區域呢？答案是確定的：

createImageData(w,h) 表示建立一個規定尺寸的ImageData對象

createImageData(ImageData) 表示建立與指定的另外一個 ImageData 對象尺寸相同的新 ImageData 對象（不會複製圖像數據）

咱們也來寫一個例子：

var oImg = ctx.createImageData(100,100);
console.log(oImg);
console.log(oImg.data)
console.log(oImg.data.length)

恩，跟前面的是同樣的，建立了一個ImageData對象，固然畫布是沒有任何的效果的，由於咱們只是建立了一個對象，那麼咱們怎麼將咱們建立的對象放到畫布上呢？那就要用到這個方法：

putImageData(imageData,x,y,dirtyX,dirtyY,dirtyWidth,dirtyHeight) 方法將圖像數據（從指定的 ImageData 對象）放回畫布上

參數：

imageData指建立或獲取的imageData對象

x,y表示imageData對象的左上角座標

dirtyX,dirtyY 表示在畫布上放置圖像的座標，以像素計，可選

dirtyWidth,dirtyHeight 表示在畫布上放置的圖形大小，可選

咱們也舉2個例子：

ctx.fillRect(0,0,100,100);
//獲取矩形框的像素
var oImg = ctx.getImageData(0,0,100,100);
ctx.putImageData(oImg,100,100);

ctx.fillRect(0,0,100,100);
//獲取矩形框的像素
var oImg = ctx.getImageData(0,0,100,100);
ctx.putImageData(oImg,100,100);
ctx.putImageData(oImg,100,0,10,10,50,50);

看，這麼一對比，就知道這些參數是什麼意思了，其中第二個我還得解釋一下，如圖小矩形，x,y依然是表示大的ImageData對象的起始座標，dirtyX,dirtyY，dirtyWidth,dirtyHeight表示是相對於如今的x,y的起始座標再來定義位置和大小，這麼解釋應該就明白了！

這就是操做像素的方法，看着很簡單，也挺好理解，可是真正用起來，仍是蠻費腦子的，咱們先來看第一個小實例，改變像素的顏色：

實例效果，改變100*100的黑色矩形框中的第10行第10列的顏色，顏色爲紅色，先畫個圖分析一下：

從上面的console中也能夠看出，像素點是從0開始的，若是上圖就是矩形的像素點的分佈（畫的有點爛，將就看一下），第10行，也就是第11行，第10列也就是第11列，那麼前十列的像素就是矩形的寬度*10，剩下的就是11個像素，兩者相加就是全部的像素，而後每一個像素用4個值表示，就是總和乘以4，好具體咱們看代碼：

ctx.fillRect(0,0,100,100);
//獲取矩形框的像素
var oImg = ctx.getImageData(0,0,100,100);
setXY(oImg,10,10,[255,0,0,255]);
//設置目標像素點的顏色
function setXY(obj,x,y,color){
    var w = obj.width;
    var h = obj.height;
    obj.data[4*(w*y+x)] = color[0];
    obj.data[4*(w*y+x)+1] = color[1];
    obj.data[4*(w*y+x)+2] = color[2];
    obj.data[4*(w*y+x)+3] = color[3];    
}
ctx.putImageData(oImg,100,100);

看，（10,10）座標點的顏色就變成了紅色，一個點仍是不太明顯，若是是一條橫向的或者的縱向的，就跟明顯了：

ctx.fillRect(0,0,100,100);
//獲取矩形框的像素
var oImg = ctx.getImageData(0,0,100,100);
for(var i=0;i<oImg.width;i++){
    setXY(oImg,i,10,[255,0,0,255]);
}
for(var i=0;i<oImg.height;i++){
    setXY(oImg,10,i,[255,0,0,255]);
}
//設置目標像素點的顏色
function setXY(obj,x,y,color){
    var w = obj.width;
    var h = obj.height;
    obj.data[4*(w*y+x)] = color[0];
    obj.data[4*(w*y+x)+1] = color[1];
    obj.data[4*(w*y+x)+2] = color[2];
    obj.data[4*(w*y+x)+3] = color[3];    
}
ctx.putImageData(oImg,100,100);

咱們常常看到那種很炫酷的粒子文字，圖形的效果，既然咱們能夠操做像素，若是咱們只顯示一部分的像素點，不就是粒子效果嗎？看下面的例子：

ctx.fillStyle = 'red';
        ctx.arc(150,150,100,0,360*Math.PI/180,false);
        ctx.fill();
        //獲取矩形框的像素
        var oImg = ctx.getImageData(50,50,200,200);
        ctx.clearRect(0,0,canvas.width,canvas.height);
        var w = oImg.width;
        var h = oImg.height;
        var arr = randomNum(w*h,w*h/10);
        var newImg = ctx.createImageData(oImg);
        for(var i=0;i<arr.length;i++){
            newImg.data[4*arr[i]] = oImg.data[4*arr[i]];
            newImg.data[4*arr[i]+1] = oImg.data[4*arr[i]+1];
            newImg.data[4*arr[i]+2] = oImg.data[4*arr[i]+2];
            newImg.data[4*arr[i]+3] = oImg.data[4*arr[i]+3];
        }
        ctx.putImageData(newImg,50,50);

        
        //某區域的部分隨機數
        function randomNum(iAll,iNow){
            var arr = [];
            var newArr = [];
            for(var i=1;i<=iAll;i++){
                arr.push(i);    
            }
            for(var i=0;i<iNow;i++){
                newArr.push(arr.splice(Math.random()*(arr.length),1));    
            }    
            return newArr;
        }

上面的例子表示，我只顯示當前的十分之一的像素，具體效果看這裏——粒子圖形

像素操做不只僅只能操做圖形，圖片咱們同樣能夠操做，這樣咱們就能作出更多的效果，看看下面的例子，咱們將圖像換成圖片，看看能不能作出粒子圖片：

var aImg = new Image();
        aImg.src = '3.jpg';
        
        //當圖片加載完畢才能進行下面的操做
        aImg.onload = function(){
            draw(this);    
        }
        function draw(obj){
            ctx.drawImage(obj,0,0,400,400);    
            //獲取矩形框的像素
            var oImg = ctx.getImageData(0,0,400,400);
            var w = oImg.width;
            var h = oImg.height;
            var arr = randomNum(w*h,w*h/2);
            var newImg = ctx.createImageData(oImg);
            for(var i=0;i<arr.length;i++){
                newImg.data[4*arr[i]] = oImg.data[4*arr[i]];
                newImg.data[4*arr[i]+1] = oImg.data[4*arr[i]+1];
                newImg.data[4*arr[i]+2] = oImg.data[4*arr[i]+2];
                newImg.data[4*arr[i]+3] = oImg.data[4*arr[i]+3];
            }
            ctx.putImageData(newImg,0,0);
        }

        //某區域的部分隨機數
        function randomNum(iAll,iNow){
            var arr = [];
            var newArr = [];
            for(var i=1;i<=iAll;i++){
                arr.push(i);    
            }
            for(var i=0;i<iNow;i++){
                newArr.push(arr.splice(Math.random()*(arr.length),1));    
            }    
            return newArr;
        }

這裏我用的是二分之一的像素點，十分之一太少了，看得不明顯，由此咱們能夠知道，也是能夠來操做圖片的像素點的，具體效果看這裏 —— 圖片粒子化

既然咱們能夠操做圖片，那能夠作的事就太多了，先看看下面這個例子，圖片反色（即將原圖片的像素顏色用相反的顏色替代）：

var aImg = new Image();
        aImg.src = '1.jpg';
        aImg.onload = function(){
            draw(this);
            
        }
        
        function draw(obj){
            ctx.drawImage(obj,0,0,400,400);
            var oImg = ctx.getImageData(0,0,400,400);
            var w = oImg.width;
            var h = oImg.height;
            
            for(var i=0;i<h;i++){
                for(var j=0;j<w;j++){
                    var result = [];
                    var color = getXY(oImg,j,i);
                    result[0] = 255 - color[0];    
                    result[1] = 255 - color[1];    
                    result[2] = 255 - color[2];    
                    result[3] = 255;    
                    setXY(oImg,j,i,result);
                }    
            }
            ctx.putImageData(oImg,w,0);
        }
        
        function getXY(obj,x,y){
            var w = obj.width;
            var h = obj.height;
            var d = obj.data;
            var color = [];
            color[0] =     obj.data[4*(y*w+x)];
            color[1] =     obj.data[4*(y*w+x)+1];
            color[2] =     obj.data[4*(y*w+x)+2];
            color[3] =     obj.data[4*(y*w+x)+3];
            return color;
        }
        
        function setXY(obj,x,y,color){
            var w = obj.width;
            var h = obj.height;
            var d = obj.data;
            obj.data[4*(y*w+x)] = color[0];
            obj.data[4*(y*w+x)+1] = color[1];
            obj.data[4*(y*w+x)+2] = color[2];
            obj.data[4*(y*w+x)+3] = color[3];
        }

是否是頗有意思，具體效果能夠看這裏—— canvas圖片反色

用這個例子，咱們還能夠延伸一下，讓它反色後，咱們再加一個倒影，美女不明顯，咱們用山峯那張：

var aImg = new Image();
        aImg.src = '3.jpg';
        aImg.onload = function(){
            draw(this);
            
        }
        function draw(obj){
            ctx.drawImage(obj,0,0,obj.width,obj.height);
            var oImg = ctx.getImageData(0,0,obj.width,obj.height);
            var w = oImg.width;
            var h = oImg.height;
            
            var newImg = ctx.createImageData(obj.width,obj.height)
            
            for(var i=0;i<h;i++){
                for(var j=0;j<w;j++){
                    var result = [];
                    var color = getXY(oImg,j,i);
                    result[0] = 255 - color[0];    
                    result[1] = 255 - color[1];    
                    result[2] = 255 - color[2];    
                    result[3] = 255;    
                    setXY(newImg,j,h-i,result);
                }    
            }
            ctx.putImageData(newImg,0,h);
        }
        
        function getXY(obj,x,y){
            var w = obj.width;
            var h = obj.height;
            var d = obj.data;
            var color = [];
            color[0] =     obj.data[4*(y*w+x)];
            color[1] =     obj.data[4*(y*w+x)+1];
            color[2] =     obj.data[4*(y*w+x)+2];
            color[3] =     obj.data[4*(y*w+x)+3];
            return color;
        }
        
        function setXY(obj,x,y,color){
            var w = obj.width;
            var h = obj.height;
            var d = obj.data;
            obj.data[4*(y*w+x)] = color[0];
            obj.data[4*(y*w+x)+1] = color[1];
            obj.data[4*(y*w+x)+2] = color[2];
            obj.data[4*(y*w+x)+3] = color[3];
        }

細心的同窗必定能看出它的原理，沒錯，就是在設置像素的時候，將它的像素方向反向，即此處「h-i」，具體效果看這裏——canvas圖片反色倒影

咱們還能夠作一些延伸，咱們能夠經過像素的透明度的參數，給它設置投影漸變，咱們來看看：

var aImg = new Image();
        aImg.src = '3.jpg';
        aImg.onload = function(){
            draw(this);
            
        }
        function draw(obj){
            ctx.drawImage(obj,0,0,obj.width,obj.height);
            var oImg = ctx.getImageData(0,0,obj.width,obj.height);
            var w = oImg.width;
            var h = oImg.height;
            
            var newImg = ctx.createImageData(obj.width,obj.height);
            
            for(var i=0;i<h;i++){
                for(var j=0;j<w;j++){
                    var result = [];
                    var color = getXY(oImg,j,i);
                    result[0] = 255 - color[0];    
                    result[1] = 255 - color[1];    
                    result[2] = 255 - color[2];    
                    result[3] = 255*i/h;    
                    setXY(newImg,j,h-i,result);
                }    
            }
            ctx.putImageData(newImg,0,h);
        }
        
        function getXY(obj,x,y){
            var w = obj.width;
            var h = obj.height;
            var d = obj.data;
            var color = [];
            color[0] =     obj.data[4*(y*w+x)];
            color[1] =     obj.data[4*(y*w+x)+1];
            color[2] =     obj.data[4*(y*w+x)+2];
            color[3] =     obj.data[4*(y*w+x)+3];
            return color;
        }
        
        function setXY(obj,x,y,color){
            var w = obj.width;
            var h = obj.height;
            var d = obj.data;
            obj.data[4*(y*w+x)] = color[0];
            obj.data[4*(y*w+x)+1] = color[1];
            obj.data[4*(y*w+x)+2] = color[2];
            obj.data[4*(y*w+x)+3] = color[3];
        }

核心代碼就一個地方，255*i/h 給透明度乘以一個百分比的值，從0-255，也是很巧妙啊，具體效果看這裏——canvas圖片反色投影漸變

總結一下吧：雖然像素操做的方法很少，可是其功能之強大，是不少人都要望其項背的，關鍵在於人的想象力和深刻的理解，要理解這樣一個概念，掌握了像素操做，就比如是掌握了物體的核心本質，你就是造物者，你想造出什麼東西，全憑你的想法，這裏只是展現了一個很低劣的效果，旨在給你們展現一下canvas像素操做的魅力，拋磚引玉而已，後期會單獨發一下canvas的像素操做的實例給你們參考，這個東西實在是過重要了！

好了，弄了幾天了，終於寫完了，原本想多寫一點的，想一想，後面再擴展吧！謝謝你們！

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。