一篇文章《HTML5(五)——Canvas API》介紹 canvas 繪制基本圖形，這節開始介紹canvas的高級操作。

一、canvas 轉換

canvas 轉換常用的幾種方法介紹，如下：

1.1 、scale - 縮放

使用語法：scale(x,y)

x：表示水平方向的縮放倍數

y：表示垂直方向的縮放倍數

eg：canvas 繪制的矩形框放大兩倍，代碼如下：

var canvas=document.getElementById("canvas")
var ctx=canvas.getContext("2d")
ctx.scale(2,2)
ctx.fillStyle="red"
ctx.fillRect(0,0,200,200)

1.2、translate - 畫布平移

使用語法：translate(x,y)

x：添加到水平坐標上的位置

y：添加到垂直坐標上的位置

設置之后開始繪制的圖片位置從(x,y)算起。

eg：繪制兩個一樣的矩形，一個在平移前繪制，一個在平移后繪制，代碼如下：

var canvas=document.getElementById("canvas")
var ctx=canvas.getContext("2d")
ctx.fillStyle="red"
        
ctx.fillRect(0,0,200,200)
//平移
ctx.translate(200,200)
ctx.fillRect(0,0,200,200)

運行結果如圖：

1.3 、rotate - 旋轉

使用語法：rotate(angle)

angle 旋轉弧度，如果想使用角度，可以把角度轉成弧度，公式為：deg * Path.PI/180。

eg：將一個矩形旋轉45度，代碼如下：

var canvas=document.getElementById("canvas")
var ctx=canvas.getContext("2d")
//旋轉45度
ctx.rotate(45*Math.PI/180)
ctx.fillStyle="red"
ctx.fillRect(0,0,200,200)

運行結果如圖：

根據上述結果我們發現旋轉的時候，默認原點是畫布的起始點，我們想要的旋轉是在矩形框中心為原點的旋轉，此時我們需要借助上translate平移，重置一下原點，修改上述代碼為：

<canvas width="400" height="400" id="canvas"></canvas>

var canvas=document.getElementById("canvas")
var ctx=canvas.getContext("2d")

ctx.translate(200,200)
ctx.rotate(45*Math.PI/180)
ctx.translate(-200,-200)

ctx.fillStyle="red"
ctx.fillRect(100,100,200,200)

運行結果如圖：

1.4、transform - 矩陣變換

使用語法：transform(a,b,c,d,e,f)

• a:水平縮放
• b:水平傾斜
• c:垂直傾斜
• d:垂直縮放
• e:水平移動
• f:垂直移動

transform可以替代前邊平移、縮放、旋轉三者，如下：

// 平移
translate(x,y) <=> transform(1,0,0,1,x,y) <=> transform(0,1,1,0,x,y)

// 縮放
sacle(x,y) <=> transform(x,0,0,y,0,0) 

// 旋轉
rotate(angle) <=> transform(Math.cos(angle*Math.PI/180), Math.sin(angel*Math.PI/180), -Math.sin(angle*Math.PI/180), Math.cos(angle*Math.PI/180))

1.5、setTransform - 矩陣變換

setTransform()方法將變換的矩陣進行重置，它把當前的變換矩陣重置為單位矩陣
使用語法：transform(a,b,c,d,e,f)
各參數說明：水平旋轉、水平傾斜、垂直傾斜、垂直縮放、水平移動、垂直移動

setTransform() 方法把當前的變換矩陣重置為單位矩陣，然后以相同的參數運行 transform()。

二、canvas 操作圖片

drawImage() 在畫布上繪制圖像、畫布或視頻。也能夠繪制圖片的一部分，增加或減少圖像的尺寸。以下是三種常見使用語法：

• 語法1：drawImage( img , x , y )
• 語法2：drawImage( img , x , y , width , height )
• 語法3：drawImage( img , sx , sy , swidth, sheight , x , y , width , height )

上述參數表示的意義如下：

eg：利用語法3，進行繪制圖片的部分內容，實現如下效果：

給上述兔子順便加一個點擊屏幕暫停開始功能，完整代碼如下：

<canvas width="400" height="400" id="canvas"></canvas>
<script>
 var canvas=document.getElementById("canvas")
 var ctx=canvas.getContext("2d")
 var img=new Image()
 let pause=false,frameCounter=0,i=0;
 img.src="./rotate.png"
 img.onload=function(){
  requestAnimationFrame(next)
 }
function next(){
 ctx.clearRect(0,0,canvas.width,canvas.height)
 if(frameCounter%5==0){ //frameCounter 控制動畫速度
  i++
  if(i==11)i=0
 }
 ctx.drawImage(img,
  0,i*240,240,240,
  0,0,240,240) // 每張圖片寬高都是240，具體參數根據圖片而定
  frameCounter ++
  if(!pause)requestAnimationFrame(next)
 }
window.onclick=function(){
 pause=!pause
 next()
}
</script>

eg：使用 canvas 畫布處理視頻，使用定時器繪制視頻的當前幀，連續起來就是一個視頻，需要注意的是必須處理暫停和開始播放兩種操作，具體代碼如下：

var v=document.getElementById("video1");
var c=document.getElementById("myCanvas");
ctx=c.getContext('2d');
v.addEventListener('play',function() {var i=window.setInterval(function() 
{ctx.drawImage(v,0,0,270,135)},20);},false);
v.addEventListener('pause',function() {window.clearInterval(i);},false);
v.addEventListener('ended',function() {clearInterval(i);},false);

三、像素級操作

常見的像素級的操作有三種：

• getImageData() - 獲取畫布像素數據
• createImageData() - 創建新的、空白像素
• putImageData() - 圖像像素數據放回畫布

3.1、getImageData

使用語法：getImageData( x , y , width , height )

• x：要被提取的圖像數據矩形區域的左上角 x 坐標。
• y：要被提取的圖像數據矩形區域的左上角 y 坐標。
• width：被提取的圖像數據矩形區域的寬度
• height：被提取的圖像數據矩形區域的高度

返回一個 imageData 對象，用來描述 canvas 區域隱含的像素數據，這個區域通過像素表示，起點是( x , y )，寬高為 widht 和 height 。

imageData 對象包含三個屬性：

• imageData.height - 像素描述的矩形實際高度。
• imageData.width - 像素描述的矩形實際寬度。
• imageData.data - 包含 rgba 順序數據的一個數組，數據使用0-255直接整數表示。

3.2、createImageData

使用語法：

createImageData( width , height )

創建一個空白的 imageData 對象，新對象的默認像素值 transparent black。對于imageData對象中的每個像素值，都存在 rgba 這四方面的信息，即：

• r - 紅色（0-255）
• g - 綠色（0-255）
• b - 藍色（0-255）
• a - alpha（0-255,0是透明，255是完全可見）

新對象默認像素值為（0,0,0,0）。

eg：如果我們想把 imageData 中一個像素變為紅色時，可以改變第一和第四位信息，代碼如下：

var imageData=ctx.createImageData(100,100)
imageData.data[0]=255
imageData.data[1]=0
imageData.data[2]=0
imageData.data[3]=255

3.1、putImageData

使用語法：

putImageData( imgData , x , y , dirtyX , dirtyY , dirtyWidth ,dirtyHeight );

參數及意義：

通過 getImageData 復制的指定矩形像素數據，編輯之后，通過 putImageData 方法將圖像數據放回畫布上。

eg：添加濾鏡效果：上述兔子是白色的變換成紅色兔子，這時需要把綠色和藍色都設置成0即可，代碼如下：

內容是《Web前端開發之Javascript視頻》的課件，請配合大師哥《Javascript》視頻課程學習。

計時器：

Javascript是單線程語言，但它允許通過設置超時和間歇時間值來調度代碼在特定的時刻執行；其是通過setTimeout()和setInterval()兩個window對象的全局函數實現的，用來注冊在指定的時間之后單次或重復調用的函數；

setTimeout()：

延遲代碼執行（也叫超時調用）：用來實現一段代碼在指定的毫秒之后運行；

語法：window.setTimeout(code,delay)，code要執行的代碼，可以是一個包含Javascript的代碼字符串，也可以是一個函數，delay等待的毫秒數；

// 不建議傳遞字符串
setTimeout("alert('zeronetwork')",3000);
// 推薦的使用方式
setTimeout(function(){
    alert('zeronetwork');
},3000);
// 推薦的使用方式
setTimeout(show,3000);
function show(){
    alert('zeronetwork');
}

因為歷史原因，第一個參數可以傳遞字符串，但有可能導致性能損失，因為這個字符串會在指定的超時時間之后進行求值，相當于執行eval()，因此不推薦使用字符串的形式；

// 能達到無限循環的目的
var n = 0;
function fun(){
    n++;
    console.log(n);
    setTimeout(fun, 1000);
}
fun();  // 直接執行
setTimeout(fun,3000);

第二個參數是一個表示等待多長時間的毫秒數，但經過該時間后指定的代碼并不一定會執行；Javascript是一個單線程的解釋器，因此一定時間內只能執行一段代碼；為了控制要執行的代碼，就有一個Javascript任務隊列，這些任務會執照將它們添加到隊列的順序執行；這個參數實際上是告訴Javascript再過多長時間把當前任務添加到隊列中，如果隊列是空的，那么添加的代碼會立即執行，如果隊列不是空的，那么它就要等前面的代碼執行完畢后再執行；

另外，如果該參數為0，也并不一定會立即執行，因為也需要將它放到隊列中，等待前面的任務全部執行完后，才會“立即”執行；

setTimeout()方法會返回一個數字ID，ID本質上是要延遲進程的ID，是計劃執行代碼的唯一標識符；可以使用clearTimeout()方法，調用此ID，達到取消超時調用的目的；

var timeoutid = setTimeout(function(){
    alert("zeronetwork");
},3000);
console.log(timeoutid);
clearTimeout(timeoutid);

只要是在指定的時間尚未過去之前調用clearTimeout()，就可以完全取消超時調用；

<input type="button" value="開始" onclick="showClock()" />
<input type="button" value="取消" onclick="window.clearTimeout(ident)" />
<div id="showtime">time</div>
<script>
function showClock(){
    var d = new Date();
    var showtime = document.getElementById("showtime");
    showtime.innerHTML = d.toLocaleString();
    // ident = setTimeout(showClock(), 1000);
    ident = setTimeout("showClock()", 1000);
}
</script>

示例：可以利用 clearTimeout() 方法在特定條件下清除延遲處理代碼。例如，當鼠標指針移過某個元素，停留半秒鐘之后才會彈出提示信息，一旦鼠標指針移出當前元素，就立即清除前面定義的延遲處理函數，避免干擾；

<h1>零點網絡</h1>
<div>零點教育是從事IT教育</div>
<p>主講：零點網絡</p>
<script>
var o = document.getElementsByTagName('body')[0].childNodes;
for(var i=0; i<o.length; i++){
    o[i].onmouseover = function(i){
        return function(){
            f(o[i]);
        }
    }(i);
    o[i].onmouseout = function(i){
        return function(){
            clearTimeout(o[i].out);
        }
    }(i);
}
function f(o){
    o.out = setTimeout(function(){
        console.log(o.tagName + ":" + o.innerText);
    },500);
}
</script>

除前兩個參數之外，HTML5規范還允許setTimeout()傳入額外的參數，并在調用函數時把這些參數傳遞過去；

setTimeout(function(str,age){
    alert(str + "age:" + age);
},3000,"wangwei",18);

時間間隔setInterval()：

代碼延遲執行機制在執行一次后就失效，而在應用中，有時希望某個程序能反復執行，比如說倒計時等，需要每秒執行一次；為此可以使用window方法的setInterval方法，其會按照指定的時間間隔重復執行代碼，直到取消或頁面被卸載；其與setTimeout()類似，參數也一致；

// 不建議使用字符串
setInterval("console.log('zero')", 3000);
// 推薦的方式
setInterval(function(){
    console.log('zero');
},3000);
 
function timer(){
    var d = new Date();
    document.getElementById("result").innerText = d.toLocaleTimeString();
}
setInterval(timer,1000);
 
// 輸出的時間并不精確，并不是整1000毫秒
var firstTime = new Date().getTime();
setInterval(function(){
    var lastTime = new Date().getTime();
    console.log(lastTime - firstTime);
    // alert("ok");  // 會暫停
    firstTime = lastTime;
},1000);
同setTimeout()一樣，setInterval()也支持第三個參數；

取消間隔性執行代碼：

使用setInterval()方法同樣會返回一個間隔調用ID，該ID可用于在將來某個時間取消間隔調用；可以使用clearInterval方法移除間隔調用，其接收一個計時器ID作為參數；

// 如果不使用它的返回值，可以直接使用數字1、2...
var i = 0;
setInterval(function(){
    console.log(i++);
    if(i>10)
        clearInterval(1);
},1000);

取消間隔調用的重要性要遠遠高于取消超時調用，因為在不取消的情況下，間隔調用將會一直執行到頁面卸載；

var num = 0, max = 10;
var intervalId = null;
function incNum(){
    num++;
    console.log(num);
    // 如果執行次數達到了max設定的值，則取消后續的調用
    if(num == max){
        clearInterval(intervalId);
        alert("結束");
    }
}
intervalId = setInterval(incNum, 1000);
 
// 另外
var mInput = document.getElementsByTagName('input')[0];
var sInput = document.getElementsByTagName('input')[1];
var m = 4,s = 52;
var timer = setInterval(function(){
    s++;
    if(s == 60){
        s = 0;
        m++;
    }
    sInput.value = s;
    mInput.value = m;
    if(m == 5)
        clearInterval(timer); 
},1000);

setTimeout()與setInterval()同時使用時，其返回的id也會按順序返回；

在某些時候 setTimeout()與 setInterval() 可以實現同樣的效果；

var num = 0, max = 10;
function incNum(){
    num++;
    console.log(num);
    // 如果執行次數達到了max設定的值，則取消后續的調用
    if(num < max){
        setTimeout(incNum, 1000)
    }else{
        alert("結束");
    }
}
setTimeout(incNum, 1000);

在使用超時調用時，沒有必要使用超時調用ID，因為每次執行代碼之后，如果不再設置另一次超時調用，調用就會自動停止；

一般認為，使用延遲代碼來模擬時間間隔是一種最佳方式；在開發環境中，很少使用時間間隔，因為時間間隔可能會在前一個間隔調用結束之前啟動，而延遲代碼完全可以避免這一點；

<div id="loadBar" style="border: red 1px solid;"></div>
<script>
var num = 0;
var colors = ['#494949','#646464','#747474','#888888','#969696','#A8A8A8','#B6B6B6','#C6C6C6','#D7D7D7','#E1E1E1','#F0F0F0','#F9F9F9'];
function loading(){
    num++;
    var loadBar = document.getElementById("loadBar");
    loadBar.style.color = colors[num-1];
    loadBar.innerHTML = loadBar.innerHTML + "■";
    if(num < 12){
        setTimeout(loading, 1000);
    }else{
        loadBar.style.display = "none";
        window.open("https://www.zeronetwork.cn/","new");
    }
}
window.onload = loading;
</script>
 
/*
定時器應用函數 invoke 
如果只傳遞f,start，則使用setTimeout
如果沒有傳遞end,則永久循環執行f，否則在end后停止
*/
function invoke(f, start, interval, end){
    if(!start) start = 0;  // 默認設置為0毫秒
    if(arguments.length <= 2)  // 單次調用模式
        setTimeout(f, start); 
    else{                   // 多次調用模式
        setTimeout(repeat, start);  // 若干秒后調用repeat()
        function repeat(){
            var h = setInterval(f, interval);  // 循環調用f()
            // 在end毫秒后停止調用，前提是end已經定義了
            if(end){
                setTimeout(function(){
                    clearInterval(h);
                }, end);
            }
        }
    }
}
invoke(function(){
    console.log("wangwei");
},1000,2000,5000);