canvas动画

2017-12-28

图片转码base64

  • 在css阶段我们知道对图片的处理，优化等需求，对于极小或者极简单的图片我们可以处理成编码64的图片，
    它有以下好处：
  • 1.无额外请求。
  • 2.对于极小或者极简单的图片。
  • 3.可以向单独图片使用，比如背景图片的重复使用。
  • 4.没有跨域问题，无需考虑缓存、文件头、cookies问题。
  • 在canvas中我们也可以把canvas画布转换成base64编码格式储存成图片使用。
  • 通过img标签的src属性获得到的是图片的绝对路径，不是相对路径。

    图片转成base64方式

  • 方式一：通过fileReader实例对象===>fileRead.readAsDataURL(files);

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    <input type="file" id="myfiles" onchange="sub()">
    //js====
    function sub(){
    	var files=document.getElementById("myfiles").files[0];
    	var fileRead=new FileReader(files);
    	fileRead.readAsDataURL(files);
    	fileRead.onload=function(e){
    		var base64=e.target.result;
    		var img=new Image();
    		img.src=base64;
    		document.getElementsByTagName("body")[0].appendChild(img);
    	}
    }

  • 方式二：canvas画布转成base64格式图片===>canvas.toDataURL();

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    ctx.beginPath();
    ctx.fillStyle="pink";
    ctx.fillRect(100,100,200,200);
    function sub(){
    	var base64=mycanvas.toDataURL();
    	console.log(base64);
    	var img=new Image();
    	img.src=base64;
    	document.getElementsByTagName("body")[0].appendChild(img);
    }

setInterVal和window.requestAnimationFrame(act);

  • 通过setInterVal和window.requestAnimationFrame(act);来实现canvas动画
  • 前者使用定时器使我们常用的动画办法，可是这种办法太过消耗性能，为了更加优化代码和节约计算机性能，我们采用window.requestAnimationFrame(act);办法。
  • 相比较计时器，后者更加节省性能，更加完善，更加适合做动画。
  • 计时器里，我们可以通过改变执行函数的描述来改变动画的速度，后者可以通过取余来减慢动画执行的速度。
  • canvas动画的执行过程就是不断的清空画布，更新开始画的起始点，然后再绘制图片，机会产生动画效果。
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    var num=0;
    var num1=0;
    function test(){
    	num++;
    	if(num%100==0){
    		num1++;
    		document.title=num1;
    	}
    	window.requestAnimationFrame(test);
    }
    test();//执行该函数

canvas视频

  • 在canvas画布上不仅可以画图片，还可以画视频，同样也可以根据ctx.getImageData(video,0,0)来获取视频的所有像素点,进而对视频进行像素的有关反色，变色处理。
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    function act(){
    	ctx.beginPath()；
    	ctx.drawImage(video,0,0);
    	res=window.requestAnimationFrame(act);
    }
    act();
    //取消此动画
    cancelAnimationFrame(act);
    //播放视频
    video.play();
    //暂停视频
    video.pause();