2757com 6

所以请使用支持canvas的浏览器来使用后面的方法2757com,同时也希望多多支持脚本之家

【原创】测量检验不一致浏览器播放canvas动画的坦荡程度,原创canvas动画

Canvas无疑是HTML5开放式互联网平台最冲动的技巧之一。近年来,除了IE8以外,各样浏览器的新本子都援助HTML5
Canvas。

工程师须要通过Javascript调用Canvas API。基本的Canvas
API蕴涵二个2D条件,该条件允许技师绘制各样图片和渲染文本,并将图像突显在浏览器窗口的定义区域。达成Canvas动画时,程序员须要在下一帧渲染前安装荧屏内容,重绘图像以落到实处动画效果。Canvas动画的落到实处部分像“翻页动画”,在绘本上的每页绘制区别图像,急迅翻过时每一帧都接连起来,看上去像动画片。因而对于Canvas来讲,纵然“浏览器翻页远远不足快”或然“浏览器播放Canvas非常不足平滑”,就能够出现跳帧的境况,让用户感到卡壳。

下文将透过二个案例突显分化浏览器播放canvas动画的平缓程度,并享受分化道具及浏览器上的测验数据。

代码框架来源于Anthony托 T.Holdener和马Rio Andres
Pagella所著的《深远HTML5使用开垦》一书,细部有考订。基本思想是创制二个只有两帧的卡通,让浏览器在10分钟的日子内尽量绘制,最终总括每秒平均试行的卡通片帧数。平均帧数越高,则表达浏览器播放Canvas动画的平缓程度越好。

 1 <!DOCUTYPE HTML>
 2 <html>
 3 <head>
 4 <!--将使用中文在Canvas上绘制文字-->
 5 <meta charset="gb2312"/>
 6 <!--设置viewport,保证浏览器在移动设备上读取到Ideal Width-->
 7 <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,scalable=0" />
 8 <title>FPS Test</title>
 9 <style type="text/css">
10 html{height:100%;overflow:hidden;}
11 body{height:100%;padding:0px;margin:0px;}
12 </style>
13 </head>
14 <body>
15 <!--测试浏览器是否支持Canvas-->
16 <canvas id="screen" >You Browser does not support HTML5 canvas.</canvas>
17 <script type="text/javascript">
18 window.onload = function(){
19 var sc=document.getElementById("screen");
20 sc.width=document.body.clientWidth;
21 sc.height=document.body.clientHeight;
22 var g=sc.getContext("2d");
23 
24 var fpsArray=[];//新建帧数组,记录浏览器每秒执行帧数
25 var fpsRound=0; //新建帧数计算器
26 var fps=0;    
27 
28 var date=new Date();
29 var startTime=Math.round(date.getTime()/1000);//计算自1970年1月1日到目前为止的毫秒数,取整为秒
30 draw(startTime);
31 
32 function draw(stTime){
33 var date=new Date();
34 var anotherTime=Math.round(date.getTime()/1000);
35 
36 if(stTime!=anotherTime){//是否已进行到下一秒
37 fps=fpsRound;
38 fpsRound=0;
39 fpsArray.push(fps);//结果为是,将浏览器在上一秒执行的帧数插入数组
40 }else{
41 fpsRound++;//结果为否,继续增加帧数
42 }
43 
44 //用Canvas绘制简单的黑屏和白屏做为动画的两帧
45 g.fillStyle="#000";
46 g.fillRect(0,0,sc.width,sc.height);
47 
48 g.fillStyle="#fff";
49 g.fillRect(0,0,sc.width,sc.height);
50 
51 /**测试使用,执行时可以删除
52 console.log("当前时间是"+anotherTime);
53 console.log("当前帧数为"+fpsRound);**/
54 
55 if(anotherTime<(startTime+10)){//浏览器执行10秒钟
56 setTimeout(function(){draw(anotherTime)},1);
57 }else{
58 showResult();
59 }
60 
61 function showResult(){
62 var sum=0;
63 var mean=0;
64 var a;
65 
66 //取得数组数值,从小到大进行排序
67 for(var i=0;i<fpsArray.length;i++){
68 for(var j=fpsArray.length-1;j>i;j--){
69 if(fpsArray[i]>fpsArray[j]){
70 a=fpsArray[j];
71 fpsArray[j]=fpsArray[i];
72 fpsArray[i]=a;
73 }
74 }
75 }
76 
77 //排序后显示
78 for(var i=0;i<fpsArray.length;i++){console.log("数组的第"+i+"个元素是:"+fpsArray[i]);}
79 for(var i=0;i<fpsArray.length;i++){sum=sum+fpsArray[i];}
80 mean=(sum/10);
81 
82 //根据设备屏宽设置文字大小并显示
83 var fontSize=0.03*sc.width;
84 g.font="italic bold "+fontSize+"px serif";
85 g.fillStyle="#000";
86 g.fillText("经测试,该浏览器10秒内可执行的帧数总量为:"+sum,40,50);
87 g.fillText("经测试,该浏览器每秒平均可执行帧数为"+mean,40,100);
88 g.fillText("设备屏宽为:"+sc.width,40,150);
89 }
90 }
91 }
92 </script>
93 </body>
94 </html>

将上述代码在不相同器材和浏览器中各测量检验12遍,结果如下(FPS为10秒平平均数量):

2757com 1

以上测验结果均为浏览器不爆发任何网页诉求,仅试行上述代码景况下成功。

Win7系统上,IE11支撑Canvas动画的坦荡程度最高,其次是Chrome、UC浏览器和FireFox。

Android
4.4.4体系上,Chrome援救Canvas动画的平缓程度最高,其次是Android自带浏览器、FireFox、Opera和UC浏览器。

Ipad
6.1.2系统上,safari对Canvas动画平滑程度的支撑要低于Android4.4.4种类上的其它浏览器。

2757com 2

 

2757com 3

参考文献:

[1] Steve Fulton & 杰夫 Fulton.HTML5 Canvas 开荒详解.[M].O’Reilly
Media,Inc.2013;

[2]安东尼托 T.Holdener & 马Rio 安德雷s
Pagella.深切HTML5应用开荒.[M].O’Reilly Media,Inc.2011;

【应接交换:) 】

Canvas无疑是HTML5开放式互连网平台最冲动的技艺之一。这两天,除了IE8以…

1、计算方块地点的代码和制图方块的代码混杂一同,即逻辑和视图混杂,基本上不能扩张了

业界动画引擎


PhysicsJS:
基于JavaScript、模块化、可扩充、易于使用的大要引擎,github
animate.css:
CSS3动画,github
Matter.js:
基于canvas,兼容IE9+,github
collie:基于Canvas,IE9+

动画

话非常少说,请看代码:

 

requestAnimationFrame:


setInterval和 setTimeout的缺陷*
甭管setInterval()依旧setTimeout()都没有办法儿达到规范,这几个延迟即你钦赐的第二个参数仅仅意味着哪一天代码会加多到浏览器的可能被施行的UI线程队列中。假使队列中有任何干活从前,那代码将会等到她成功才会实行。简单的讲,纳秒级的推迟不是象征曾几何时代码会执行,而是意味着曾几何年代码会增多进队列;

当相应的浏览器窗口最小化,JavaScript
反应计时器在背景标签还是不断运行,消耗CPU和电瓶。

CSS transitions和 animations
优势在于浏览器知道如何动画将会生出,所以获得正确的距离来刷新UI。而javascript动画,浏览器不知情动画正在发生,所以催生了requestAnimationFrame,对于延迟做了十分大程度的优化。

仅绘制用户可见的动画,那意味着在页面不可知时不会绘制动画,节省 CPU
和电瓶;绘制动画不容许出现多个排队的回调函数,大概阻塞浏览器;由于浏览器计划好时(空闲时)才绘制帧,不会有等待绘制的帧,未有多余的帧绘制,由此动画更平整,CPU
和电瓶使用被越来越优化。

在意:在有八个卡通时,出现五个凸现八个不可知,requestAnimationFrame
会导致动画不一同,所以,
钦赐一个参数确定保证全部必要一同的卡通状态,不受可见程度的熏陶(如一组动画从起先以来通过的年华),实际不是依照各种动画的前一帧。

兼容各浏览器的requestAnimationFrame

 (function() {
    var lastTime = 0;
    var vendors = ['webkit', 'moz' /*, 'ms', 'o'*/];
    for(var x = 0,len = vendors.length ; x < len && !window.requestAnimationFrame; ++x) {
    window.requestAnimationFrame = window[vendors[x] + 'RequestAnimationFrame'];
    window.cancelAnimationFrame = window[vendors[x] + 'CancelAnimationFrame'] ||    // name has changed in Webkit
                                  window[vendors[x] + 'CancelRequestAnimationFrame'];
    }

    if (!window.requestAnimationFrame) {
        window.requestAnimationFrame = function(callback, element) {
        var currTime = new Date().getTime();
        var timeToCall = Math.max(0, 16.7 - (currTime - lastTime));
        var id = window.setTimeout(function() {
            callback(currTime + timeToCall);
        }, timeToCall);
        lastTime = currTime + timeToCall;
        return id;
      };
    }
    if (!window.cancelAnimationFrame) {
       window.cancelAnimationFrame = function(id) {
        clearTimeout(id);
       };
    }
}());



/* 方案2:*/

var oldStyleMove = (function() {
var timeLast = 0
return function( callback ) {
    var timeCurrent = +new Date(),
        timeDelta

    timeDelta = Math.max( 0, 16 - ( timeCurrent - timeLast ))
    timeLast  = timeCurrent + timeDelta

    return setTimeout( function() { 
        callback( timeCurrent + timeDelta ) 
    }, timeDelta )
   }
})(),

WIN = window,

requestAnimationFrame = WIN.requestAnimationFrame       ||
                    WIN.webkitRequestAnimationFrame ||
                    WIN.mozRequestAnimationFrame    ||
                    oldStyleMove,

cancelAnimationFrame  = WIN.cancelAnimationFrame       ||
                    WIN.webkitCancelAnimationFrame ||
                    WIN.mozCancelAnimationFrame    ||
                    function( timeoutID ) {
                        clearTimeout( timeoutID )
                    };

Web动画质量指南

效能如下图:

<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8">
 <title>first line</title>
 <style type="text/css">
       body{
         background: #456E89;
       }
 .canvas {
 height: 300px;
 width: 300px; 
 margin: 0 auto;
 font-family: arial;
 }
 </style>
 </head>
 <body>
 <div class="canvas">
 <canvas id="cvs" width="300" height="300"></canvas>
 </div>
 <script type="text/javascript">
 var cvs = document.getElementById("cvs").getContext("2d");
 function Anim(opt) { //初始化值
 this.opt = opt;
 }
 //node 表示画布节点
 //staX 表示开始x坐标
 //staY 表示开始y坐标
 //len表示终点坐标,
 //timing表示运行的间隔时间, 
 //num表示坐标增长的大小 
 //direc表示判断绘制线条的方向,false表示X轴,ture表示Y轴
 //lw表示线宽的大小 
 //color 表示绘制线条颜色
 Anim.prototype.draw = function() { //绘制直线的线条
 var opt = this.opt; //设置对象的属性
 var adx = opt.staX;
 var ady = opt.staY;
 var that = {
  x: opt.staX,
  y: opt.staY
 };
 var Time = setInterval(function() {
  opt.direc //判断绘制方向
  ?
  opt.len > ady ? ady += opt.num : ady -= opt.num :
  opt.len > adx ? adx += opt.num : adx -= opt.num;
  if(adx == opt.len || ady == opt.len) { //停止循环
  clearInterval(Time);
  }
  opt.Node.beginPath(); // 开始绘制线条
  opt.Node.moveTo(that.x, that.y);
  opt.Node.lineTo(adx, ady);
  opt.Node.lineWidth = opt.lw || 1;
  opt.Node.strokeStyle = opt.color;
  opt.Node.stroke();
 }, opt.timing);
 };
 Anim.prototype.txt = function(opc) {//绘制文字 
 cvs.beginPath();
 cvs.fillStyle = "rgba(255,255,255,"+opc+")";
 cvs.font = "200px arial";
 cvs.fillText("L", 100, 200);
 };
 var line1 = new Anim({ //实例
 Node: cvs,
 color: "#fff",
 staX: 114,
 staY: 58,
 len: 134,
 timing: 50,
 num: 1,
 direc: false,
 lw: 2
 });
 line1.draw(); //执行绘制
 var line2 = new Anim({
 Node: cvs,
 color: "#fff",
 staX: 115,
 staY: 58,
 len: 200,
 timing: 20,
 num: 1,
 direc: true,
 lw: 2
 });
 line2.draw();
 var line3 = new Anim({
 Node: cvs,
 color: "#fff",
 staX: 133,
 staY: 184,
 len: 58,
 timing: 20,
 num: 1,
 direc: true,
 lw: 2
 });
 line3.draw();
 var line4 = new Anim({
 Node: cvs,
 color: "#fff",
 staX: 132,
 staY: 184,
 len: 203,
 timing: 35,
 num: 1,
 direc: false,
 lw: 2
 });
 line4.draw();
 var line5 = new Anim({
 Node: cvs,
 color: "#fff",
 staX: 203,
 staY: 199,
 len: 115,
 timing: 35,
 num: 1,
 direc: false,
 lw: 2
 });
 line5.draw();
 var line6 = new Anim({
 Node: cvs,
 color: "#fff",
 staX: 203,
 staY: 199,
 len: 184,
 timing: 50,
 num: 1,
 direc: true,
 lw: 2
 });
 line6.draw();
 var test = new Anim();//绘制文字实例
 setTimeout(function () {
 var num = 0;
 var times = setInterval(function () {
  num++;
  var t = num/100;
  if(t === 1){
  clearInterval(times);
  }
  test.txt(t);
 },50)
 },3000)
 </script>
 </body>
</html>

你的浏览器不帮忙 Canvas 标签,请使用 Chrome 浏览器 大概 FireFox 浏览器

FPS


动画间隔决定了动画片的每秒帧数(FPS),
一般的话,FPS越高,相当于每秒播放的帧数越多,动画会越流畅,不过,因为大多数的荧屏刷新频率是
60Hz,当动画的FPS超过 60Hz
时,显示屏会把八个或更加多的帧突显在同一画面上,那样就能够油然则生
镜头撕裂,画面撕裂跟掉帧八个意味,所以普通来讲FPS 为 60frame/s
时动画效果最佳,也便是每帧16.67ms,在浏览器中要减去渲染时间1ms左右,获得的结果是每帧时间大致15ms。然则大家能够在
jQuery 的源码中窥见它的 interval是13ms:jQuery.fx.interval = 13,
依据地点的布道:1000 /(13+1.5)= 70 >
60hz,那样会并发画面撕裂,作为产业界规范的 jQuery
分明是不会产出这种低端错误的,所以2ms的差异是怎么个野趣?JohnResig有一篇博客对13ms做了表达,作品链接见末尾。因为jQuery的卡通是基于
setInterval
的,所以会存在必然的推迟:setTimeout(func,
delay),这里是说在delay时间后将职责 func参加 UI
义务队列,而非立刻实行该义务,所以那边会有确定的推移;各浏览器电火花计时器精度的异样。

对于 setInterval的标题,新的措施 requestAnimationFrame
是很好的革新,具体可参见The secret to silky smooth JavaScript
animation!那篇文章。

参考:
stackoverflow
jQuery 的卡通帧宽为何是 13ms

选用requestAnimationFrame更加好的达成javascript动画

骨子里canvas自个儿很简短,便是去学学它的API,多看实例,多和气动手练习,多总计。不过canvas的API实在是稍稍多,对于初学者的话,可能学到二分之一就止步不前了。小编也会有这种感到,在攻读的进度中,编写实例,用到了在那之中好些个的性子和艺术,不过回头来看的时候总认为哪些也没用。所以决定系统性的记录一下它常用到的API,方便以后翻看,也可以有意或是无意造福一下大家。

你大概感兴趣的小说:

  • JS
    Canvas电火花计时器模拟动态加载动画
  • JS基于HTML5的canvas标签达成光彩夺目的色相球动画效果实例
  • js canvas完结擦除动画
  • JavaScript+html5
    canvas达成图片破碎重组动画特效
  • javascript+HTML5的Canvas完结Lab单车动画效果
  • Android开荒之图形图像与动画(一)Paint和Canvas类学习
  • Canvas 绘制粒子动画背景
  • Canvas达成放射线动画效果

2757com 42757com 5重复组织代码

日渐的从这里开头,将在起来波及到复杂的绘图了。而发端复杂的绘图在此以前,大家得先驾驭三个概念:canvas绘图的意况。

如上正是本文的全部内容,希望本文的源委对大家的上学可能干活能拉动一定的协助,同期也可望多多协理脚本之家!

那么为啥选拔 HTML5 而不是别的呢?首先,Javascript
语法简洁利落,相应的函数库小巧不过够用, HTML5 Canvas 标签的 2D
表现技艺也达到了供给,Chrome
浏览器的运作速度令人乐意。除此而外,咱们不用安装笨重的并轨开拓情状,无需安装运转时,大家只要求四个增进成效的记事本、一个浏览器就可以去实施我们的主张,并且一贯将成效表未来互连网上。大家只是发布小说同别的人分享自身的想法而已,至于平台、框架、语言特色,那一个无关的事物自然牵扯的越少越好,那正是自己采用HTML5 的原委。

假设你的浏览器是IE8及以下,那么很可惜,上边这段文字会被渲染出来!并且下边包车型客车法子也都无法采纳了;所以请使用援助canvas的浏览器来行使前面包车型大巴点子。

地点提及这些硬件,曾经被叫做 SpriteSmart。现前段时间,大家的微管理器已经丰硕无敌,不再供给 七喜那样的救助硬件,然则如此的法力依旧必要,只然而用软件来达成罢了,所以,大家照例用
Pepsi-Cola 来称呼游戏中的一个剧中人物。

ctx.scale(x, y);     //基于原点缩放,x、y是两个轴的缩放倍数

2757com 6

//获取canvas容器
var can = document.getElementById(‘canvas');
//创建一个画布
var ctx = can.getContext(‘2d');

帧数:
速度:
比例:
}}}

2757com 7

二、动画初叶

var img = new Image();
img.src= './images/background.jpg';
ctx.drawImage(img, 0, 0); //img为图像,(0, 0)为起始坐标

c、绘制图形

2757com 8

 

缩放

那三个点子自身就介绍了,能够去 Google 相关的材质。

var ctx = document.getElementById('canvas').getContext('2d');
ctx.fillStyle = 'red';
ctx.scale(0.8, 1.2);
ctx.beginPath();
ctx.arc(75, 75, 60, 0, Math.PI * 2);
ctx.fill();

<canvas id=”canvas3″ width=”250″ height=”300″ style=”background-color:black”>
    你的浏览器不援助 <canvas>标签,请使用 Chrome 浏览器 大概 FireFox 浏览器
</canvas><br/>
帧数:<input  id=”txt4″ type=”text” value=”10″/><br/>
速度:<input type=”text” id=”txt5″ value=”5″/><br/>
比例:<input type=”text” id=”txt6″ value=”2″/><br/>
<input type=”button” value=”开始” onclick=”animate()”/>
<input type=”button” value=”暂停” onclick=”stop()”/>

图像

帧数:
历次活动距离:
}}}}

var bg = ctx.createLinearGradient(x1, y1, x2, y2); //定义线性渐变,渐变的起点 (x1,y1) 与终点 (x2,y2)。
var bg1 = ctx.createRadialGradient(50, 50, 0, 50, 50, 100); //定义径向渐变
bg.addColorStop(0, 'red'); //定义好,之后开始上色
bg.addColorStop(0.5, 'blue');
bg.addColorStop(1, 'rgba(0, 0, 0, 0.6)');


var bg = ctx.createLinearGradient(0, 0, 0, 200); //线性渐变
bg.addColorStop(0, 'black');
bg.addColorStop(0.6, '#fff');
ctx.fillStyle = bg;
ctx.fillRect(10, 10, 100, 100);

其它,绘制进程中有三个速度须求调整:

旋转

 

ctx.lineJoin = 'miter(默认)'、round(圆角)、`bevel(横线)`   //两线段连接处所显示的样子

据他们说在很深切的时代,有多少距离小编也不亮堂,只怕是任天堂红白机是哪位时期吗,由于游戏机管理器的计量速度有限,所以特意设置了三个硬件用来拍卖角色图像的有关数据,那些数量恐怕包含:

ctx.translate(x, y);   //更改canvas的原点

发表评论

电子邮件地址不会被公开。 必填项已用*标注