1200字范文 > 《HTML5 Canvas核心技术图形动画与游戏开发》读书笔记

《HTML5 Canvas核心技术图形动画与游戏开发》读书笔记

时间：2019-04-17 13:03:35

《HTML5 Canvas核心技术图形、动画与游戏开发》读书笔记

文章目录

《HTML5 Canvas核心技术图形、动画与游戏开发》读书笔记第1章基础知识第2章绘制第3章文本第4章图像与视频第5章动画第6章精灵第7章物理效果第8章碰撞检测

第1章基础知识

对比theCanvas和theCanvas1可知

canvas元素实际上由两套尺寸，一个时元素本身的大小，还有一个时元素绘制表面的大小属性width和height设置的时元素本身大小和元素绘制表面的大小css设置canvas大小，只修改元素本身大小，不影响绘制表面，容易出现像素伸缩的情况浏览器可能会自动缩放canvas,当元素大小域canvas绘图表面不相符，浏览器会缩放后者，使之复合前者大小，可能会导致奇怪、无用的效果

canvas元素的属性

canvas元素的方法

CanvasRenderingContext2D对象所含的属性

canvas提供save()和restore()用于保存以及回复当前canvas绘图环境属性

function drawGrid(strokeStyle,fillStyle){controlContext.save();//保存context到栈controlContext.fillStyle=fillStyle;controlContext.strokeStyle=strokeStyle;/**draw grid*/controlContext.restore();//从栈中恢复context//save()和restore()方法可以嵌套式调用}

CanvasRenderingContext2D之中与状态操作有关的方法

基本的绘制操作

.arc().beginPath().clearRect().fill().fillText().lineTo().moveTo().stroke()

一个基本的时钟程序

事件处理

//浏览器监听canvas.onmousedown=function(e){/**code*/}canvas.addEventListener('mousedown',function(e){/**code*/})//将鼠标坐标转换为canvas坐标function windowToCanvas(canvas,x,y){var bbox=canvas.getBoundingClientRect();return {x:x-bbox.left*(canvas.width/bbox.width),y:y-bbox.top*(canvas.height/bbox.height)};}canvas.onmousemove=function(e){var loc=windowToCanvas(canvas,e.clientX,e.clientY);drawBackground();drawSpritesheet();drawGuidelines(loc.x,loc.y);updateReadout(loc.x,loc.y);}

精灵表坐标查看器

<div id="readout"></div><canvas height="500" width="500" id="theCanvas"></canvas><script>var canvas=document.getElementById('theCanvas'),readout=document.getElementById('readout'),context=canvas.getContext('2d'),spritesheet=new Image();function windowToCanvas(canvas,x,y){var bbox=canvas.getBoundingClientRect();return {x:x-bbox.left*(canvas.width/bbox.width),y:y-bbox.top*(canvas.height/bbox.height)};}function drawBackground(){var VERTICAL_LINE_SPACING=12,i=context.canvas.height;context.clearRect(0,0,canvas.width,canvas.height);context.strokeStyle='lightgray';context.lineWidth=0.5;while(i>VERTICAL_LINE_SPACING*4){context.beginPath();context.moveTo(0,i);context.lineTo(context.canvas.width,i);context.stroke();i-=VERTICAL_LINE_SPACING;}}function drawSpritesheet(){context.drawImage(spritesheet,0,0);}function drawGuidelines(x,y){context.strokeStyle='rgba(0,0,230,0.8)';context.lineWidth=0.5;drawVerticalLine(x);drawHorizontalLine(y);}function updateReadout(x,y){readout.innerText='('+x.toFixed(0)+','+y.toFixed(0)+')';}function drawHorizontalLine(y) {context.beginPath();context.moveTo(0,y+0.5);context.lineTo(context.canvas.width,y+0.5);context.stroke();}function drawVerticalLine(x){context.beginPath();context.moveTo(x+0.5,0);context.lineTo(x+0.5,context.canvas.height);context.stroke();}canvas.onmousemove=function(e){var loc=windowToCanvas(canvas,e.clientX,e.clientY);drawBackground();drawSpritesheet();drawGuidelines(loc.x,loc.y);updateReadout(loc.x,loc.y);}spritesheet.src="close.svg";spritesheet.onload=function(e){drawSpritesheet();}drawBackground();</script>

通过保存与恢复绘图表面来绘制辅助线

使用DIV元素来实现橡皮筋式选取框

使用toDataURL()方法将canvas的内容打印出来

<div id="controls"><input id="snapshotButton" type="button" value="Take snapshot" ></div><img id="snapshotImageElement"><canvas height="500" width="500" id="theCanvas"></canvas><script>var canvas=document.getElementById('theCanvas'),context=canvas.getContext('2d');var snapshotButton=document.getElementById('snapshotButton'),snapshotImageElement=document.getElementById('snapshotImageElement'),loop;snapshotButton.onclick=function(e){var dataUrl;if(snapshotButton.value==='Take snapshot'){dataUrl=canvas.toDataURL();clearInterval(loop);snapshotImageElement.src=dataUrl;snapshotImageElement.style.display='inline';canvas.style.display='none';snapshotButton.value='Return to Canvas';}else{canvas.style.display='inline';snapshotImageElement.style.display='none';loop=setInterval(drawClock,1000);snapshotButton.value='Take snapshot';}};//画时钟代码</script>

以图像方式实现的时钟程序

第2章绘制

Canvas的绘制模型

在向canvas之上绘制图像或图形时，浏览器按照以下步骤操作：

1.将图形或图像绘制到一个无限大的透明位图中，在绘制时遵从当前的填充模式、描边模式以及线条样式。

2.将图像或图形的阴影绘制到另外一幅位图中，在绘制时使用当前绘图环境的阴影设定。

3.将阴影中每一个像素的alpha分量诚意绘图环境对象的globalAlpha属性值。

4.将绘有阴影的位图与经过剪辑区域剪切过的canvas进行图像合成，在操作时使用当前的合成模式参数。

5.将图形或图像的每一个像素颜色分量，乘以绘图环境对象的globalAlpha属性值。

6.将绘有图形或图像的位图，合成到当前经过剪辑区域剪切过的canvas位图之上，在操作时使用当前的合成操作符。

只有在启用阴影效果时才会执行第2~4步。

矩形的绘制

//将整个canvas的内容清除context.clearRect(double x,double y,double w,double h)//绘制矩形边框context.strokeRect(double x,double y,double w,double h)//绘制矩形填充context.fillRect(double x,double y,double w,double h)

绘制简单的矩形

<canvas height="500" width="500" id="theCanvas"></canvas><script>var canvas=document.getElementById('theCanvas'),context=canvas.getContext('2d');context.lineJoin='round';context.lineWidth=30;context.font='24px Helvetica';context.fillText('Click anywhere to erase',175,40);context.strokeRect(75,100,200,200);context.fillRect(325,100,200,200);context.canvas.onmousedown=function(e){context.clearRect(0,0,canvas.width,canvas.height);}</script>

矩形的清除、描边与填充

颜色与透明度

<canvas height="500" width="500" id="theCanvas"></canvas><script>var canvas=document.getElementById('theCanvas'),context=canvas.getContext('2d');context.lineJoin='round';context.lineWidth=30;context.font='24px Helvetica';context.fillText('Click anywhere to erase',175,200);context.strokeStyle='goldenrod';context.fillStyle='rgba(0,0,255,0.5)';context.strokeRect(75,100,200,200);context.fillRect(325,100,200,200);context.canvas.onmousedown=function(e){context.clearRect(0,0,canvas.width,canvas.height);}</script>

渐变

var canvas=document.getElementById('theCanvas'),context=canvas.getContext('2d');//线性渐变var gradient=context.createLinearGradient(0,0,canvas.width,0);//放射渐变//var gradient=context.createRadialGradient(canvas.width/2,canvas.width/2,0,100);gradient.addColorStop(0,'blue');gradient.addColorStop(0.25,'red');gradient.addColorStop(0.5,'purple');gradient.addColorStop(0.75,'red');gradient.addColorStop(1,'yellow');context.fillStyle=gradient;context.rect(0,0,canvas.width,canvas.height);context.fill();

渐变色

图案

<div><input type="radio" id="repeatRadio" name="patternRadio" checked>repeat<input type="radio" id="repeatXRadio" name="patternRadio" >repeat-x<input type="radio" id="repeatYRadio" name="patternRadio" >repeat-y<input type="radio" id="noRepeatRadio" name="patternRadio" >no repeat</div><canvas height="500" width="500" id="theCanvas"></canvas><script>var canvas=document.getElementById('theCanvas'),context=canvas.getContext('2d');var repeatRadio=document.getElementById('repeatRadio'),repeatXRadio=document.getElementById('repeatXRadio'),repeatYRadio=document.getElementById('repeatYRadio'),noRepeatRadio=document.getElementById('noRepeatRadio'),image=new Image();function fillCnavasWidthPattern(repeatString){var pattern=context.createPattern(image,repeatString);context.clearRect(0,0,canvas.width,canvas.height);context.fillStyle=pattern;context.fillRect(0,0,canvas.width,canvas.height);context.fill();}repeatRadio.onclick=function(e){fillCnavasWidthPattern('repeat');}repeatXRadio.onclick=function(e){fillCnavasWidthPattern('repeat-x');}repeatYRadio.onclick=function(e){fillCnavasWidthPattern('repeat-y');}noRepeatRadio.onclick=function(e){fillCnavasWidthPattern('no-repeat');}image.src="bell.png";image.onload=function(e){fillCnavasWidthPattern('repeat');}</script>

createPattern()方法

阴影

shadowColor:CSS3格式的颜色shadowOffsetX:从图形或文本到阴影的水平像素偏移shadowOffsetY:从图形或文本到阴影的垂直像素偏移shadowBlur:一个与像素无关的值，高斯模糊方程。以便对阴影进行模糊化处理

如果满足以下条件，那么使用canvas的绘图环境对象就可以绘制阴影效果：

1.指定的shadowColor值不是全透明的。

2.在其余的阴影属性之中，存在一个非0的值

var SHADOW_COLOR='rgba(0,0,0,0.7)';//.....function setIconShadow(){iconContext.shadowColor=SHADOW_COLOR;//负偏移内嵌阴影正偏移外阴影iconContext.shadowOffsetX=4;iconContext.shadowOffsetY=4;iconContext.shadowBlur=5;}

绘制内嵌阴影

var drawingContext=document.getElementById('drawingCanvas').getContext('2d'),ERASER_LINE_WIDTH=1,ERASER_SHADOW_STYLE='blue',ERASER_STROKE_STYLE='rgba(0,0,255,0.6)',ERASER_SHADOW_OFFSET= -5,ERASER_SHADOW_BLUR=20,ERASER_RADIUS=60;function setEraserAttributes(){drawingContext.lineWidth=ERASER_LINE_WIDTH;drawingContext.shadowColor=ERASER_SHADOW_STYLE;drawingContext.shadowOffsetX=ERASER_SHADOW_OFFSET;drawingContext.shadowOffsetY=ERASER_SHADOW_OFFSET;drawingContext.shadowBlur=ERASER_SHADOW_BLUR;drawingContext.strokeStyle=ERASER_STROKE_STYLE;}function drawEraser(loc){drawingContext.save();setEraserAttributes();drawingContext.beginPath();drawingContext.arc(loc.x,loc.y,ERASER_RADIUS,0,Math.PI*0.2,false);drawingContext.clip();drawingContext.stroke();drawingContext.restore();}

CanvasRenderingContext2D之中与阴影效果有关的属性

文本、矩形与圆弧的描边及填充

var context=document.getElementById('drawingCanvas').getContext('2d');function drawGrid(context,color,stepx,stepy){}drawGrid(context,'lightgray',10,10);context.font='48pt Helvetica';context.fillStyle='red';context.lineWidth='2';context.strokeText('Stroke',60,110);context.fillText('Fill',440,110);context.strokeText('Stroke & Fill',650,110);context.fillText('Stroke & Fill',650,110);context.lineWidth='5';context.beginPath();context.rect(80,150,150,100);context.stroke();context.beginPath();context.rect(400,150,150,100);context.arc(475,370,60,0,Math.PI*3/2);context.closePath();context.fill();

CanvasRenderingContext2D之中与路径有关

运用非零环绕规则来实现剪纸效果

绘制剪纸图形

绘制线段

var canvas=document.getElementById('theCanvas').getContext('2d');context.lineWidth=1;context.beginPath();context.moveTo(50,10);context.lineTo(450,10);context.stroke();

moveTo()和lineTo()

绘制网格

var canvas=document.getElementById('theCanvas').getContext('2d');function drawGrid(context,color,stepx,stepy){context.strokeStyle=color;context.lineWidth=0.5;for(var i=stepx+0.5;i<context.canvas.width;i+=stepx){context.beginPath();context.moveTo(i,0);context.lineTo(i,context.canvas.height);context.stroke();}for(var i=stepy+0.5;i<context.canvas.height;i+=stepy){context.beginPath();context.moveTo(0,i);context.lineTo(context.canvas.width,i);context.stroke();}}drawGrid(context,'lightgray',10,10);

绘制坐标轴

橡皮筋式的线条绘制

<div id="controls">Stroke color:<select id="strokeStyleSelect"><option value="red">red</option><option value="green">green</option><option value="blue">blue</option><option value="orange">orange</option><option value="cornflowerblue">cornflowerblue</option><option value="goldenrod">goldenrod</option><option value="navy">navy</option><option value="purple">purple</option></select>Guidewires:<input type="checkbox" checked id="guidewireCheckbox"><input type="button" id="eraseAllButton" value="Erase all" ></div><canvas height="500" width="500" id="theCanvas"></canvas><script>var canvas=document.getElementById('theCanvas'),context=canvas.getContext('2d'),eraseAllButton=document.getElementById('eraseAllButton'),strokeStyleSelect=document.getElementById('strokeStyleSelect'),guidewireCheckbox=document.getElementById('guidewireCheckbox'),drawingSurfaceImageData,mousedown={},rubberbandRect={},dragging=false,guidewires=guidewireCheckbox.checked;function drawGird(color,stepx,stepy){}function windowToCanvas(x,y){var bbox=canvas.getBoundingClientRect();return {x:x-bbox.left*(canvas.width/bbox.width),y:y-bbox.top*(canvas.height/bbox.height)};}function saveDrawingSurface(){drawingSurfaceImageData=context.getImageData(0,0,canvas.width,canvas.height);}function restoreDrawingSurface(){putImageData(drawingSurfaceImageData,0,0);}function updateRubberbandRectangle(loc){rubberbandRect.width=Math.abs(loc.x-mousedown.x);rubberbandRect.height=Math.abs(loc.y-mousedown.y);if(loc.x>mousedown.x)rubberbandRect.left=mousedown.x;else rubberbandRect.left=loc.x;if(loc.y>mousedown.y)rubberbandRect.top=mousedown.y;else rubberbandRect.top=loc.y;}function drawRubberbandShape(loc){context.beginPath();context.moveTo(mousedown.x,mousedown.y);context.lineTo(loc.x,loc.y);context.stroke();}function updateRubberband(loc){updateRubberbandRectangle(loc);drawRubberbandShape(loc);}function drawHorizontalLine(y){context.beginPath();context.moveTo(0,y+0.5);context.lineTo(context.canvas.width,y+0.5);context.stroke();}function drawVerticalLine(x){context.beginPath();context.moveTo(x+0.5,0);context.lineTo(x+0.5,context.canvas.height);context.stroke();}function drawGuidewires(x,y){context.save();context.strokeStyle='rgba(0,0,230,0.4)';context.lineWidth=0.5;drawVerticalLine(x);drawHorizontalLine(y);context.restore();}canvas.onmousedown=function(e){var loc=windowToCanvas(e.clientX,e.clientY);e.preventDefault();saveDrawingSurface();mousedown.x=loc.x;mousedown.y=loc.y;dragging=true;}canvas.onmousemove=function(e){var loc;if(dragging){e.preventDefault();loc=windowToCanvas(e.clientX,e.clientY);restoreDrawingSurface();updateRubberband(loc);if(guidewires){drawGuidewires(loc.x,loc.y);}}}canvas.onmousedown=function(e){loc=windowToCanvas(e.clientX,e.clientY);restoreDrawingSurface();updateRubberband(loc);dragging=false;}eraseAllButton.onclick=function(e){context.clearRect(0,0,canvas.width,canvas.height);drawGird('lightgray',10,10);saveDrawingSurface();}strokeStyleSelect.onchange=function(e){context.strokeStyle=strokeStyleSelect.value;}guidewireCheckbox.onchange=function(e){guidewires=guidewireCheckbox.checked;}context.strokeStyle=strokeStyleSelect.value;drawGird('lightgray',10,10);</script>

虚线绘制

var context=document.getElementById('theCanvas').getContext('2d');function drawDashedLine(context,x1,y1,x2,y2,dashLength) {dashLength=dashLength===undefined?5:dashLength;var deltaX=x2-x1;var deltaY=y2-y1;var numDashes=Math.floor(Math.sqrt(deltaX*deltaX+deltaY*deltaY)/dashLength);for(var i=0;i<numDashes;i++){context[i%2===0?'moveTo':'lineTo'](x1+(deltaX/numDashes)*i,y1+(deltaY/numDashes)*i);}context.stroke();}context.lineWidth=3;context.strokeStyle='blue';drawDashedLine(context,20,20,context.canvas.width-20,20);drawDashedLine(context,context.canvas.width-20,20,context.canvas.height-20,10);drawDashedLine(context,context.canvas.width-20,context.canvas.height-20,context.canvas.height-20,15);drawDashedLine(context,20,context.canvas.height-20,20,2);

扩展CanvasRenderingContext2D对象

CanvasRenderingContext2D对象中与线段绘制有关

以橡皮筋式辅助线来协助用户画圆

function drawRubberbandShape(loc){var angle,radius;if(mousedown.y===loc.y){radius=Math.abs(loc.x-mousedown.x);}else{angle=Math.atan(rubberbandRect.height/rubberbandRect.width);radius=rubberbandRect.height/Math.sin(angle);}context.beginPath();context.arc(mousedown.x,mousedown.y,radius,0,Math.PI*2,false);context.stroke();if(fillCheckbox.checked){context.fill();}}

arcTo()

CanvasRenderingContext2D对象用于绘制圆弧及圆形

二次方贝塞尔曲线

//创建一条表示二次方贝塞尔曲线的路径，第一个点曲线的控制点，第二个点锚点context.quadraticCurveTo(double x1,double y1,double x2,double y2)//创建一条代表三次方贝塞尔曲线的路径，三个坐标的中，前两个点控制点，最后一个锚点context.bezierCurveTo(double x1,double y1,double x2,double y2,double x3,double y3)

CanvasRenderingContext2D用于平移、旋转坐标系

变换矩阵方法

transform()可以在当前的变化矩阵之上叠加运用另外的变化效果；setTransform()将当前的变化矩阵设置为默认的单位矩阵，然后在单位矩阵之上运用用户指定的变化效果。多次调用transform()方法造成的变换效果是累积，每次只要调用setTransform()，它就会将上一次的变换矩阵彻底清除。

用于坐标变换的方法

transform(double a,double b,double c,double d,double e,double f);setTransform(double a,double b,double c,double d,double e,double f);//使用该方程对平移，缩放，旋转操作x1=ax+cy+e;y1=bx+dy+f;

图形合成

//设置合成模式context.globalCompositeOperation='source-in';

剪辑区域

他是在canvas之中由路径所定义的一块区域，浏览器会将所有的绘图操作都限制在本区域内执行，在默认情况下，剪辑区域的大小与canvas一致，除非你通过创建路径并调用canvas绘图环境对象**clip()**方法来显示的设定剪辑区域，否则默认的剪辑区域不会影响canvas之中所绘制的内容，然而，一旦设置好剪辑区域，那么在canvas之中绘制的所有内容都将局限在该区域内，这意味在剪辑区域以外进行绘制时没有任何效果的

clip()

将剪辑区域设置为当前剪辑区域与当前路径的交集。第一次调用clip之前。剪辑区域的大小与整个canvas一致。

因为clip()方法会将剪辑区域设置为当前剪辑区域与当前路径的交际，所以对该方法的调用一般都是嵌入save()与restore()方法之间的，否则剪辑区域将会越变越小。

第3章文本

文本的描边与填充

//文本内容填充 maxWidth以像素为单位指定所绘文本的的最大宽度，可选context.fillText(text,canvas.width/2,canvas.height/2,maxWidth);//文本描边context.strokeText(text,canvas.width/2,canvas.height/2,maxWidth);//测量文本，返回TextMetrics对象,包含width文本像素宽度context.measureText(text);//设置文本属性context.font="256px Palatino";context.textAlign='center';context.textBaseline='bottom';//渐变色填充文本var gradient=context.createLinearGradient(0,0,canvas.width,canvas.height);context.fillStyle=gradient;context.fillText(text,65,200);context.strokeText(text,65,200);

设置字型属性

第4章图像与视频

drawImage()

源图像:source-image ------ s

目标canvas:destination-canvas -----d

//将整幅图像绘制在目标canvas中的指定位置上drawImage(image,dx,dy);//将图像完整地绘制到指定的位置上，绘制时会根据目标区域的宽度与高度进行缩放drawImage(image,dx,dy,dw,dh);//将整幅图像或其一部分绘制到目标canvas的指定位置上，绘制时会根据目标区域的宽高对图像进行缩放。drawImage(image,sx,sy,sw,sh,dx,dy,dw,dh);

//创建新的空白 ImageData 对象。context.createImageData(width,height);context.createImageData(imageData);//返回 ImageData 对象，该对象拷贝了画布指定矩形的像素数据。context.getImageData(sx,sy,sw,sh);//将图像数据（从指定的 ImageData 对象）放回画布上。context.putImageData(imgData,dx,dy,dirtyX,dirtyY,dirtyWidth,dirtyHeight);

修改图像数据

ImageData对象中的data属性指向一个包含8位二进制整数的数组，这些整数的值位于0~255之间，分别表示一个像素的红绿栏及透明度分量。

将canvas保存位图片文件,FIleSystem API用法

canvas.addEventListener('dragenter',function(e){e.preventDefault();e.dataTransfer.effectAllowed='copy';},false);canvas.addEventListener('dragover',function(e){e.preventDefault();},false);window.requestFileSystem=window.requestFileSystem||window.webkitRequestFileSystem;canvas.addEventListener('drop',function(e){var file=e.dataTransfer.files[0];window.requestFileSystem(window.TEMPORARY,5*1024*1024,function(fs){fs.root.getFile(file.name,{create:true},function(fileEntry){fileEntry.createWriter(function(writer){writer.write(file);});image.src=fileEntry.toURL();},function(e){alert(e.code); });},function(e){alert(e.code);});},false);

视频处理

//在canvas中播放视频文件function animate(){if(!video.ended){context.drawIamge(video,0,0,canvas.width.canvas.height);window.requestNextAnimationFrame(animate);}}video.play();window.requestNextAnimationFrame(animate);

第5章动画

//Firefoxwindow.mozRequestAnimationFrame(FrameRequestCallback c) //chromewindow.webkitRequestAnimationFrame(FrameRequestCallback c) //Internet Explorerwindow.msRequestAnimationFrame(FrameRequestCallback c)window.requestNextAnimationFrame=(function(){return window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.msRequestAnimationFrame||function(callback,element){var self=this,start,finish;window.setTimeout(function(){start=+new Date();callback(start);finish=+new Date();self.timeout=1000/60-(finish-start);},self.timeout);}})();//用于实现W3C规范所定义requestAnimationFrame()功能的“Polyfill式方法”window.requestAnimationFrame=(function(){var originWebkitMethod,wrapper=undefined,callback=undefined,geckoVersion=0,userAgent=navigator.userAgent,index=0,self=this;if(window.webkitRequestAnimationFrame){wrapper=function(time){if(time===undefined){time=+new Date();}self.callback(time);};originWebkitMethod=window.webkitRequestAnimationFrame;window.webkitRequestAnimationFrame=function(callback,element){self.callback=callback;originWebkitMethod(wrapper,element);}}if(window.mozRequestAnimationFrame){index=userAgent.indexOf('rv:');if(userAgent.indexOf('Gecko')!=-1){geckoVersion=userAgent.substr(index+3,3);if(geckoVersion==='2.0'){window.mozRequestAnimationFrame=undefined;}}}return window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.msRequestAnimationFrame||function(callback,element){var self=this,start,finish;window.setTimeout(function(){start=+new Date();callback(start);finish=+new Date();self.timeout=1000/60-(finish-start);},self.timeout);};})();

第6章精灵

Sprite对象的属性

图片绘制器

var ImagePainter=function(imageUrl){this.image=new Image();this.image.src=imageUrl;};ImagePainter.prototype={paint:function(sprite,context){if(plete){context.drawImage(this.image,sprite.left,sprite.top,sprite.width,sprite.height);}} };

精灵表绘制器

SpriteSheetPainter=function(cells){this.cells=cells||[];this.cellIndex=0;};SpriteSheetPainter.prototype={advance:function(){if(this.cellIndex==this.cells.length-1){this.cellIndex=0;}else{this.cellIndex++;}},paint:function(sprite,context){var cell=this.cells[this.cellIndex];context.drawImage(spritesheet,cell.x,cell.y,cell.w,cell.h,sprite.left,sprite.top,cell.w,cell.h);}};

精灵制作器

第7章物理效果

重力

//抛体垂直速度的修正公式Vy=Vy0-gt;ARENA_LENGTH_IN_METERS=10;pixelsPerMeter=canvas.width/ARENA_LENGTH_IN_METERS;top+=velocityY/fps;velocityY=GRAVITY_FORCE*(elapsedTime/1000)*pixelsPerMeter//摆钟运动角度计算公式a=a0*cos(根号(g/1)*t)

AnimationTimer

AnimationTimer=function(duration,timeWarp){if(timeWarp!==undefined)this.timeWarp=timeWarp;if(duration!==undefined)this.duration=duration;this.stopwatch=new Stopwatch();};AnimationTimer.prototype={start:function(){this.stopwatch.start();},stop:function(){this.stopwatch.stop();},getElapsedTime:function(){var elapsedTime=this.stopwatch.getElapsedTime(),percentComplete=elapsedTime/this.duration;if(!this.stopwatch.running)return undefined;if(this.timeWarp==undefined)return elapsedTime;return elapsedTime*(this.timeWarp(percentComplete)/percentComplete);},isRunning:function(){return this.stopwatch.running;},isOver:function(){return this.stopwatch.getElapsedTime()>this.duration;}};

时间轴扭曲函数

AnimationTimer.makeEaseInt=function(strength){return function(percentComplete){//y=x^2return Math.pow(percentComplete,strength*2);}};AnimationTimer.makeEaseOut=function(strength){return function(percentComplete){//y=1-(1-x)^2return 1-Math.pow(1-percentComplete,strength*2);}};AnimationTimer.makeEaseInOut=function(){return function(percentComplete){//y=x-sin(x*2*PI)/(2*PI)return percentComplete-Math.sin((percentComplete*2*Math.PI)/(2*Math.PI));}};AnimationTimer.makeElastic=function(passes){passes=passes||DEFAULT_ELASTIC_PASSES;return function(percentComplete){//y=(1-cos(x*Npasses*PI)*(1-x))+xreturn ((1-Math.cos(1-percentComplete*Math.PI*passes))*(1-percentComplete))+percentComplete;}};AnimationTimer.makeBounce=function(bounces){var fn=AnimationTimer.makeElastic(bounces);return function(percentComplete){percentComplete=fn(percentComplete);return percentComplete<=1?percentComplete:2-percentComplete;}};AnimationTimer.makeLinear=function(){return function(percentComplete){//y=xreturn percentComplete;}};

第8章碰撞检测

外接矩形判别法

ballWillHitLegde:function(ledge){var ballRight=ball.left+ball.width,ledgeRight=ledge.left+ledge.width,ballBottom=ball.top+ball.height,nextBallBottomEstimate=ballBottom+ballvelocityY/fps;return ballRight>ledge.left&&ball.left<ledgeRight&&ballBottom<ledge.top&&nextBallBottomEstimate>ledge.top;}

外接圆判别法

isBallInBucket:function(){var ballCenter={x:ball.left+BALL_RADIUS,y:ball.top+BALL_RADIUS},distance=Math.sqrt(Math.pow(bucketHitCenter.x-ballCenter.x,2)+Math.pow(bucketHitCenter.y-ballCenter.y,2));return distance<BALL_RADIUS+bucketHitRadius;}//圆心之间的距离c=根号(a^2+b^2);

碰到墙壁即被弹回的小球

handleEdgeCollisions:function(){var bbox=getBoundingBox(ball),right=bbox.left+bbox.width,bottom=bbox.top+bbox.height;if(right>canvas.width||bbox.left<0){velocityX=-velocityX;if(right>canvas.width){ball.left-=right-canvas.width;}if(bbox.left<0){ball.left-=bbox.left;}}if(bottom>canvas.height||bbox.top<0){velocityY=-velocityY;if(bottom>canvas.height){ball.top-=bottom-canvas.height;}if(bbox.top<0){ball.top-=bbox.top;}}}

光线投射法

catchBall={intersectionPoint:{x:0,y:0},isBallInBucket:function () {if(lastBallPostion.left===ball.left||lastBallPostion.top===ball.top){return ;}var x1=lastBallPostion.left,y1=lastBallPostion.top,x2=ball.left,y2=ball.top,x3=BUCKET_LEFT+BUCKET_WIDTH/4,y3=BUCKET_TOP,x4=BUCKET_LEFT+BUCKET_WIDTH,y4=y3,m1=(ball.top-lastBallPostion.top)/(ball.left-lastBallPostion.left),m2=(y4-y3)/(x4-x3),b1=y1-m1*x1,b2=y3-m2*x3;this.intersectionPoint.x=(b2-b1)/(m1-m2);this.intersectionPoint.y=m1*this.intersectionPoint.x+b1;return this.intersectionPoint.x>x3&&this.intersectionPoint.x<x4&&ball.top+ball.height>y3&&ball.left+ball.width<x4;}}

本内容不代表本网观点和政治立场，如有侵犯你的权益请联系我们处理。

网友评论

网友评论仅供其表达个人看法，并不表明网站立场。