/*最小平移向量对象： @axis:指示方向的单位向量 @overlap:表示两图形在该方向上发生重叠的部分所占据的长度 */ var MinimumTranslationVector = function (axis, overlap) { this.axis = axis; this.overlap = overlap; }; /*重构后的separationOn
var ImageShape = function(imageSource, x, y, w, h) { var self = this; this.image = new Image(); this.imageLoaded = false; this.points = [ new Point(x,y) ]; this.x = x; this.y = y;
/*基本也会遵循SAT定理，但圆只有一个投影轴，即圆心与多边形距离最近的顶点间的连线就是圆的投影轴，如果要检测多边形与圆的碰撞，还需要修改 Polygon.prototype.collidesWith = function (shape) { var axes = shape.getAxes(); if (axes === undefined) { return poly
var Polygon = function () { this.points = []; this.strokeStyle = 'blue'; this.fillStyle = 'white'; }; Polygon.prototype = new Shape(); Polygon.prototype.getAxes = function () { var v1 =
/*上面提到的两种算法并不适合多边形的检测，分离轴定理只适用于凸多边形(也适合非规则多边形)，也就是所有内角均小于180度的多边形，而不能检测凹多边形。 分离轴定理：把受测的两个多边形置于一堵墙前面，用光线照射它们，根据其阴影部分是否相交来判断二者有没有相撞， 【1】投影轴的数量 与每个多边形的边数有关，所以要在很多轴
/*其算法如下： 从当前位置画一条与物体的速度向量相重合的线1号，然后从另一个待测物体出发，绘制第二条平行的线2号，这样一帧一帧的重复画，比如把一个小球扔进一个桶中，当 1号线和2号线的交点在桶口的左右边沿之间 小球位于2号线的下方。即发生的碰撞 当一号线为水平或垂直时不应该判断，因为一种斜率为0，另一种斜率为无穷大 */ var canvas = document.get
//外接矩形-事前检测 ballWillHitledge: function(ledge){ var ballRight = ball.left+ball.width, ledgeRight = ledgt.left + ledge.width, ballbottom = ball.top+ball.height, nextBallBotto
/*分为事前检测和事后检测，事前检测容易出错，因为它是根据当前帧速率来估算的，如果帧速度突然改变，那么估算出的结果可能就不准了，事后检测则不需要进行这些运算，但它要进行一些碰撞后的处理工作，这些工作通常和事前检测法中预估物体未来的运动位置所做的运算一样复杂*/ /*常用的检测方法如下： 【1】外接图形法 【2】光线投射法 【3】分离轴法：它有一个副产品MTV（最小平移向量
/* 其就是根据固定的时间用不同的公式计算出当时的速度，时间扭曲函数其实就是用公式计算不同的时间，这样v=gt，计算出的速度就不是匀速的了，HTML5不支持补间动画，所以需要人为来实现。最多详细的扭曲函数参考：AnimationTimer.js */ var ANIMATION_DURATION = 1000; var pushTimer = new AnimationT
/*在运动中最常使用的三种物理效果是 重力 非线性运动 非线性动画 */ /*重力是9.81m/S===32ft/S 重力公式：v = gt 抛物线：v1 = v0-gt;v0是初始速度 钟摆公式：a = a0*cos(Math.sqrt(g/i) * t) ;a表示当前的角度，a0表示钟摆的初始角度，g表示重力加速度，i表示钟摆的长度。此公式并没有考虑钟摆的重量
var sprites = []; var context = ...; function animate(time){ var i; context.clearRect(); drawBg(); for(i=0; i<sprites.length; ++i){ sprites.update(context, time); }
/*更为复杂的请参考6.3.2滚动的小球例子和6.10节炸弹的例子,精灵动画需要很好的结合下面的三个方法： 【1】update：精灵对象的方法 【2】advance：精灵表绘制器的方法 【3】requestNextAnimationFrame：调用 */ var spritesheet = new Image(), runnerCells = [ { l
var SpriteAnimator = function (painters, elapsedCallback) { this.painters = painters; if (elapsedCallback) { this.elapsedCallback = elapsedCallback; } }; SpriteAnimator.prototype = {
SpriteSheetPainter = function (cells) { this.cells = cells; }; SpriteSheetPainter.prototype = { cells: [],//数组索引，记录精灵表中每个单元的信息 cellIndex: 0, advance: function () {//把索引值加1，以便在下一帧画第二个单元格的
//...V1..这个版本的实现存在一些问题，它没有考虑图像的加载是否完成。V2版本会修正这个问题 var ImagePainter = function (imageUrl) { this.image = new Image(); this.image.src = imageUrl; }; ImagePainter.prototype = { image: undefined
var ballPainter = { paint: function (sprite, context) { var x = sprite.left + sprite.width/2, y = sprite.top + sprite.height/2, width = sprite.width,
/*所有的绘制器都可以归纳为以下三类： 【1】描边及填充绘制器：使用图形API来绘制精灵见6.02.01 【2】图像绘制器：用于绘制图像6.02.02 【3】精灵表绘制器：用于绘制精灵表中的单个精灵，把动画的所有帧放在一张图像上，此图片称为精灵表6.02.03 【4】精灵图片轮询绘制器：模拟精灵图表的一种技术 */ //下面这个持续过程需要注意 function a
var Sprite = function (name, painter, behaviors) { if (name !== undefined) this.name = name; if (painter !== undefined) this.painter = painter; if (behaviors !== undefined) this.behavi
一文带你揭开软件架构师职业的真相。做为一名资深软件架构师(自知水平一般，承蒙公司厚爱给予此Title)。多年来曾设计过很多应用、也招聘过很多架构师，所幸接触过形形色色的人才。长久以来一直想对自己多年的架构工作进行一次总结，清晰的描述一下软件架构师这个职位，也为有志成为架构师的同学们提供一点参考。无奈每次复盘都杂乱无章，这一拖就是两年，直到看到Yuval的书才有了点清晰的概念，也就有了这篇blog。此文中所有观点只代表本人，水平有限文笔一般，如有不妥请不吝赐教，感谢！！！
/*常用的技术称为图块复制(blitting)，即从离屏缓冲区中将内容发生变化的那部分背景图像复制到屏幕上，还有其它两种方法是将所有内容擦除并重新绘制&仅重绘内容发生变化的那部分区域。一般是用clip()方法来实现的.如果背景比较简单采用将所有内容擦除再重新绘制可能性能更好 【1】、用这些技术不用担心闪屏的问题，因为浏览器在实现时都采用了双缓冲技术。即把修改后的图像放在离屏文件中，
/*js中的setIimeou和setInterval方法中的时间间隔并不准确，它只是规定了一个大致的时间，比如规定10m，则可能会在11秒执行。而且它是主动通知IE去改变，而最好的方式是让IE通知程序去做出改变，否则浏览器可能会在一段时间内死掉，所以W3C扩展了requestAnimationFrame()方法，它的时间更精确，而且是IE通知程序去做出改变，每种浏览器对上述方法的支持都不一样，所
//.....................EXAMPLE01....................................................... <body> <video id='video' poster> <source src='Chrome_starts_fast_hammock.mp4'/>
/*工作原理如下： 当拖动鼠标时，程序捕获放大镜最小外接矩形范围内的像素，然后程序将剪辑区域设置为放大镜所在范围，并将刚捕获的图像绘制到canvas自身，在绘制时调用接受9个参数的drawImage()方法来放大图像。 除了绘制被放大镜放在的图像外，还会擦除用户拖动之前的那个放大镜图像，每当拖动放大镜时，程序会调用putInageData()方法把上一次移动鼠标时用getImag
/*当某个操作比较耗时时，可以把这些放在另一个线程中进行处理，处理时需要注意它的postMessage onmessage方法是定死的*/ var sunglassFilter = new Worker('sunglassFilter.js'); sunglassFilter.postMessage( context.getImageData(0, 0, canvas.width, canvas.
/*除了可以把图像绘制到canvas中，还可以把自身或其它canvas、视频的某一帧绘制到当前绘图环境中。 --1--有时两个canvas的相互绘制需要创建离屏canvas，离屏技术实际上是用空间换时间的一种技术 创建离屏canvas元素，可以动态创建元素，也可以用网页中一个隐藏区域的元素 offscreenCanvas = document.crea
简单的文本编辑器实现
var canvas = document.getElementById('canvas'), context = canvas.getContext('2d'), CENTROID_RADIUS = 10, CENTROID_STROKE_STYLE = 'rgba(0, 0, 0, 0.5)', CENTROID_FILL_STYLE ='rgba(80, 1
/* *****FONT PROPERTY******* */ context.textAlign; //指定文字的水平对齐：start(默认), end, left, right, center;限定文本的绘制方向的，比如start, top时，文本就从x,y向下和右书写，如果第一个字国字，那第x,y就是国字左上角 contex.textBashLine; //指定文字
剪辑区域-橡皮擦&不断变小的动画
图像合成效果
Copyright © 2005-2025 51CTO.COM 版权所有 京ICP证060544号
