一篇文章《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);