用HTML5中的Canvas融合公式绘图颗粒健身运动的实例

日期:2020-10-12 类型:科技新闻 

关键词:如何制作微信小程序,微信小程序源码,小程序码生成,凡科网微信小程序,微信公众号小程序

近期想弄1个网页页面,把自身学HTML5全过程中做的一部分DEMO放上去做结合,可是,假如就仅仅做个网页页面把全部DEMO1个1个排序又感觉太不好看了。就想,既然学了canvas,那就来折腾下访问器,做个小小的的开场动漫吧。

开场动漫的实际效果,想了1会,决策用颗粒,由于感觉颗粒较为好玩。还记得之前我写的第1篇技术性博文,便是讲文本照片颗粒化的:文本照片颗粒化 , 那时就仅仅做的是平行线健身运动,顺带加了1点三d实际效果。健身运动公式很简易。因此就想这个开场动漫就做的更动感1些吧。

先上DEMO:http://2.axescanvas.sinaapp.com/demoHome/index.html

实际效果是否比平行线的健身运动更为动感呢?并且也的确很简易,别忘了这篇博文的题型,小小的滴公式,大大滴快乐。要做出这样的实际效果,用的就仅仅是大家中学。。或高中情况下的物理学专业知识,加快健身运动,减速健身运动的公式啦。因此的确是小小的滴公式。楼主很喜爱折腾1些炫酷的物品,尽管将会平常工作中上用不上,可是,这快乐的确很令人痴迷啊。并且,做下这些还可以提升1下程序编写的逻辑思维工作能力哈。

空话很少说,进到主题啦。就简易的解释1下基本原理吧~~~

颗粒健身运动的关键编码就这么1点:
 

XML/HTML Code拷贝內容到剪贴板
  1. update:function(time){   
  2.             this.x += this.vx*time;   
  3.             this.y += this.vy*time;   
  4.     
  5.             if(!this.globleDown&&this.y>0){   
  6.                 var yc = this.toy - this.y;   
  7.                 var xc = this.tox - this.x;   
  8.     
  9.                 this.jl = Math.sqrt(xc*xc+yc*yc);   
  10.     
  11.                 var za = 20;   
  12.     
  13.                 var ax = za*(xc/this.jl),   
  14.                     ay = za*(yc/this.jl),   
  15.                     vx = (this.vx+ax*time)*0.97,   
  16.                     vy = (this.vy+ay*time)*0.97;   
  17.     
  18.                 this.vx = vx;   
  19.                 this.vy = vy;   
  20.     
  21.             }else {   
  22.                 var gravity = 9.8;   
  23.                 var vy = this.vy+gravity*time;   
  24.     
  25.                 if(this.y>canvas.height){   
  26.                     vy = -vy*0.7;   
  27.                 }   
  28.     
  29.                 this.vy = vy;   
  30.             }   
  31.         },   

颗粒一共有两种情况,1种是随意落体,1种便是遭受吸力。随意落体就不说了。说吸力以前先贴出颗粒的特性:
 

JavaScript Code拷贝內容到剪贴板
  1. var Dot = function(x,y,vx,vy,tox,toy,color){   
  2.         this.x=x;   
  3.         this.y=y;   
  4.         this.vx=vx;   
  5.         this.vy=vy;   
  6.         this.nextox = tox;   
  7.         this.nextoy = toy;   
  8.         this.color = color;   
  9.         this.visible = true;   
  10.         this.globleDown = false;   
  11.         this.setEnd(tox , toy);   
  12.     }   
  13.     
  14. setEnd:function(tox , toy){   
  15.                 this.tox = tox;   
  16.                 this.toy = toy;   
  17.                 var yc = this.toy - this.y;   
  18.                 var xc = this.tox - this.x;   
  19.         },   
  20.   

x,y便是颗粒的部位,vx是颗粒水平速率,vy是颗粒的竖直速率,nexttox之类知不知道道都没有谓,只是临时储存自变量的。tox,和toy便是颗粒的目地影响力置。

最先,先给予全部颗粒1个目地地,这个目地地下面再相见说。也便是要颗粒抵达的地区,随后再界定1个自变量za做为加快度,实际标值的话,就自身多检测下就会有大约主要参数的了,我设成20,觉得就类似了。za是颗粒和目地地之间连线的加快度,因此,大家根据颗粒的部位和目地地的部位,根据简易的3角涵数,便可以把颗粒的水平加快度和竖直加快度求出来了,就这段
 

JavaScript Code拷贝內容到剪贴板
  1. var ax = za*(xc/this.jl),   
  2.  ay = za*(yc/this.jl),     

有了水平加快度和竖直加快度后,接下来就更简易了,立即测算水平速率和竖直速率的增加量,从而更改水平速率和竖直速率的值
 

XML/HTML Code拷贝內容到剪贴板
  1. vx = (this.vx+ax*time)*0.97,   
  2. vy = (this.vy+ay*time)*0.97;  

之因此要乘于0.97是以便仿真模拟动能消耗,颗粒才会减速。time是每帧的時间差

测算出速率后就升级颗粒部位就可以了。
 

XML/HTML Code拷贝內容到剪贴板
  1. this.x += this.vx*time;   
  2. this.y += this.vy*time;  

由于颗粒在航行全过程中,与目地地之间的连线方位是不断更改的,因此每帧都要再次测算颗粒的水平加快度和竖直加快度。

健身运动基本原理便是这般,是不是很简易呢。

健身运动基本原理说完了,再扯1下上面那个动漫的实际完成吧:动漫原始化,在1个离屏canvas上把要想的字或照片画出来,随后再根据getImageData这个方式获得离屏canvas的像素。随后用1个循环系统,把离屏canvas中有绘图的地区找出来,由于imageData里的data值便是1个rgba数字能量数组,因此大家分辨最终1个的值也便是全透明度超过128便是有绘图过的地区。随后获得该地区的xy值,以便避免颗粒目标过量致使网页页面卡顿,因此大家就限定1下颗粒的数量,取像素的情况下x值和y值每次递增2,从而降低颗粒数量。
 

XML/HTML Code拷贝內容到剪贴板
  1. this.osCanvas = document.createElement("canvas");   
  2.         var osCtx = this.osCanvas.getContext("2d");   
  3.     
  4.         this.osCanvas.width = 1000;   
  5.         this.osCanvas.height = 150;   
  6.     
  7.         osCtx.textAlign = "center";   
  8.         osCtx.textBaseline = "middle";   
  9.         osCtx.font="70px 微软雅黑,黑体 bold";   
  10.         osCtx.fillStyle = "#1D181F"  
  11.         osCtx.fillText("WelCome" , this.osCanvas.width/2 , this.osCanvas.height/2⑷0);   
  12.         osCtx.fillText("To wAxes' HOME" , this.osCanvas.width/2 , this.osCanvas.height/2+40);   
  13.         var bigImageData = osCtx.getImageData(0,0,this.osCanvas.width,this.osCanvas.height);   
  14.     
  15.         dots = [];   
  16.     
  17.         for(var x=0;x<bigImageData.width;x+=2){   
  18.             for(var y=0;y<bigImageData.height;y+=2){   
  19.                 var i = (y*bigImageData.width + x)*4;   
  20.                 if(bigImageData.data[i+3]>128){   
  21.                     var dot = new Dot(   
  22.                         Math.random()>0.5?Math.random()*20+10:Math.random()*20+canvas.width⑷0,   
  23.                         -Math.random()*canvas.height*2,   
  24.                         0,   
  25.                         0,   
  26.                         x+(canvas.width/2-this.osCanvas.width/2),   
  27.                         y+(canvas.height/2-this.osCanvas.height/2),   
  28.                         "rgba("+bigImageData.data[i]+","+bigImageData.data[i+1]+","+bigImageData.data[i+2]+",1)"   
  29.                     );   
  30.                     dot.setEnd(canvas.width/2,canvas.height/2)   
  31.                     dots.push(dot);   
  32.                 }   
  33.             }   
  34.         }   

根据循环系统获得到颗粒的部位xy值后,把部位赋给颗粒,变成颗粒的目地地。随后动漫刚开始,便可以做出文本照片颗粒化的实际效果了。