canvas day2

16、闭包：

当function里嵌套function时，内部的function可以访问外部function里的变量。

function foo(x) {

    var tmp = 3;

    return function (y) {

        alert(x + y + (++tmp));

    }

}

var bar = foo(2); // bar 现在是一个闭包

bar(10);

当return的是内部function时，就是一个闭包。

虽然bar不直接处于foo的内部作用域，但bar还是能访问x和tmp。

17、回调：

所谓的回调，就是程序员A写了一段程序（程序a），其中预留有回调函数接口，并封装好了该程序。程序员B要让a调用自己的程序b中的一个方法，于是，他通过a中的接口回调自己b中的方法。

注：关于回调，只是理解了大概是怎么回事，查看多篇博客，还是不能深入理解，对于博客中给出的例子代码，看不懂,有待解决。

18、pen.drawImage(img,imgx,imgy,imgw,imgh,x,y,w,h)

//红色参数是必填参数，imgx,imgy剪切相对于原始图片（左上角开始）的x,y坐标，imgw,imgh剪切原始图片的宽高，x,y绘制图片的x,y坐标，w,h绘制图片的宽高

19、Img.width:w=Img.height:h

//绘制等比例缩放图片

20、for(var i=0;i<10;i++){

pen.drawImage(img,100+20*i,100+20*i)

}

//绘制一个重叠的图片

21、通过setInterval()函数（定时器）制作动画

<canvas id="canvas"></canvas>

<button id="btn">开始</button>

<script>

var canvas=document.querySelector('#canvas')

var btn=document.querySelector('#btn')

canvas.width=600

canvas.height=600

canvas.style.border='1px solid red'

var pen=canvas.getContext('2d')

var img=new Image()

img.src='images/boy.png' //创建图片

var timer //声明定时器

var isOpen=true //布尔值设置button

img.onload=function(){ //onload()函数，等图片代码加载完成后才执行

btn.onclick=function(){

if(isOpen){

btn.innerHTML='暂停'

var i=0

timer=setInterval(function(){

canvas.width=canvas.width //每次执行之前清屏

i++

i%=4 //0,1,2,3循环

w=306/4

pen.drawImage(img,w*i,0,w,130,300-50*i,100,w,130) //画图

},100) // 剪切图片的起始位置

isOpen=false 剪切图片的大小

}else{ 绘制图片的起始位置

btn.innerHTML='开始' 绘制图片的大小

clearInterval(timer) //清除定时器

isOpen=true

}

}

}

</script>

22、调整画布画图

<canvas id="canvas"></canvas>

<script>

var canvas=document.querySelector('canvas'）

canvas.width=600

canvas.height=600

canvas.style.border='1px solid red'

var pen=canvas.getContext('2d')

pen.save() //保存画布

pen.rotate(90*Math.PI/180) //画布旋转90度

pen.strokeRect(200,-300,300,100) //绘制矩形

pen.restore() //还原保存，还原上一次保存的画布信息（须与保存画布配套使用）

pen.fillRect(0,0,100,100)

</script>

旋转：

pen.translate(200,200) //位移

pen.scale(2,1) //缩放

pen.globalAlpha=0.5 //透明度

23、保存canvas画的图

<img src="" alt="" id="img1"/>

var canvasImage=canvas.toDataURL('image/jpg',1) //保存图片类型保存图片质量（0-1）

document.getElementById('img1').src=canvasImage //使用保存的图片

24、画布渲染画布

<canvas id="canvas"></canvas>

<script>

var canvasHide=document.createElement('canvas')

canvasHide.width=600

canvasHide.height=600

var penHide=canvasHide.getContext('2d')//创建一个用户看不见的画布

penHide.fillRect(100,100,200,100) //在看不见的画布上画图

var canvas=document.getElementById('canvas')

canvas.width=600

canvas.height=600

canvas.style.border='1px solid red'

var pen=canvas.getContext('2d') //获取并设置用户看得见的画布

pen.drawImage(canvasHide,0,0) //将隐藏的画布上的图画到可视的画布上

</script>

25、多个定时器

<button>1</button>

<button>2</button>

<button>3</button>

<p>1</p>

<p>1</p>

<p>1</p>

<script>

var btns=document.querySelectorAll('button')

var ps=document.querySelectorAll('p')

var timer

btns[0].onclick=function(){

timer=setInterval(function(){

ps[0].innerHTML+=1

},1000)

}

btns[1].onclick=function(){

setInterval(function(){

ps[1].innerHTML+=1

},1000)

}

btns[2].onclick=function(){

clearInterval(timer)

}

</script>

注：当多次点击btns[0]时，btns[2]已不能清除btns[0]的定时器，因为多次点击之后timer已不是 原来的定时器。

26、定时器的嵌套

<button id="btn">开始</button>

<p id="progress" style="width: 0px;height: 20px;background: red"></p>

<canvas id="canvas" style="border: 1px solid red"></canvas>

<script>

var canvas=document.querySelector('#canvas')

canvas.width=500

canvas.height=500

var pen=canvas.getContext('2d')

var btn=document.querySelector('#btn')

var timer

btn.onclick=function(){

timer=setInterval(function(){

var pro=document.querySelector('#progress')

// console.log(typeof (pro.style.width))字符串类型

if(parseInt(pro.style.width)<100){

pro.style.width=parseInt(pro.style.width)+1+'px'

}else{

clearInterval(timer)

var img=new Image()

img.src='images/boy.png'

img.onload=function(){

var i=0

setInterval(function(){

canvas.width=canvas.width

i++

i%=4

var w=306/4

pen.drawImage(img,w*i,0,w,130,300-50*i,100,w,130)

},1000)

}

}

},10)

}

</script>