生而为人我很遗憾的博客_前端(2)

滑动条Slider48

var COREHTML5 = COREHTML5 || {} // Constructor........................................................ COREHTML5.Slider = function(strokeStyle, fillStyle, knobPercent, hp

ide

ci

2d

js

canvas

原创 2023-05-12 00:56:00 71 阅读

进度条Progressbar47

var COREHTML5 = COREHTML5 || {} // Constructor.................................................... COREHTML5.Progressbar = function(strokeStyle, fillStyle, horizonta

2d

js

canvas

原创 2023-05-12 00:55:21 69 阅读

圆角矩形RoundedRectangle46

var COREHTML5 = COREHTML5 || {} // Constructor........................................................ COREHTML5.RoundedRectangle = function(strokeStyle, fillStyle,

2d

General

js

canvas

原创 2023-05-12 00:54:47 45 阅读

自定义控件45

/*创建控件，然后将控件的DOM加入DOM结构树中的某个HTML元素中，这个操作可以通过appendTo(element)来完成。开发者也可以通过控件的domElement属性来访问其DOM元素，控制其外观，要实现控件最基本的要实现以下几个方法：【1】appendTo(element):将控件的DOM元素加入element参数所代表的元素之吕，并且根据外围的DOM元素大

控件

开发者

HTML

js

canvas

原创 2023-05-12 00:54:13 62 阅读

利用MTV弹离物体44

//HTML......................................................................... <body> <canvas id='canvas' width='500' height='300'> Canvas not supported </canva

ci

ide

Math

js

canvas

原创 2023-05-12 00:53:35 73 阅读

利用MTV分开和粘合物体43

//HTML......................................................................... <body> <canvas id="canvas" width="600" height="400"> Canvas not supported </canva

ci

Math

ide

js

canvas

原创 2023-05-12 00:52:41 45 阅读

根据最小平移向量应对碰撞42

/*最小平移向量对象： @axis:指示方向的单位向量 @overlap:表示两图形在该方向上发生重叠的部分所占据的长度 */ var MinimumTranslationVector = function (axis, overlap) { this.axis = axis; this.overlap = overlap; }; /*重构后的separationOn

ci

Math

ide

js

canvas

原创 2023-05-12 00:52:03 85 阅读 yyds干货盘点

图像与精灵的碰撞41

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;

sed

Source

2d

js

canvas

原创 2023-05-12 00:51:20 34 阅读

圆与多边形之间的碰撞40

/*基本也会遵循SAT定理，但圆只有一个投影轴，即圆心与多边形距离最近的顶点间的连线就是圆的投影轴，如果要检测多边形与圆的碰撞，还需要修改 Polygon.prototype.collidesWith = function (shape) { var axes = shape.getAxes(); if (axes === undefined) { return poly

Math

scala

ide

原创 2023-05-12 00:50:42 98 阅读

多边形之间的碰撞39

var Polygon = function () { this.points = []; this.strokeStyle = 'blue'; this.fillStyle = 'white'; }; Polygon.prototype = new Shape(); Polygon.prototype.getAxes = function () { var v1 =

sed

Math

scala

js

canvas

原创 2023-05-12 00:50:09 80 阅读

分离轴定理SAT与最小平移向量MTV38

/*上面提到的两种算法并不适合多边形的检测，分离轴定理只适用于凸多边形(也适合非规则多边形)，也就是所有内角均小于180度的多边形，而不能检测凹多边形。分离轴定理：把受测的两个多边形置于一堵墙前面，用光线照射它们，根据其阴影部分是否相交来判断二者有没有相撞，【1】投影轴的数量与每个多边形的边数有关，所以要在很多轴

凸多边形

凹多边形

原创 2023-05-12 00:49:32 347 阅读

光线投射法37

/*其算法如下：从当前位置画一条与物体的速度向量相重合的线1号，然后从另一个待测物体出发，绘制第二条平行的线2号，这样一帧一帧的重复画，比如把一个小球扔进一个桶中，当 1号线和2号线的交点在桶口的左右边沿之间小球位于2号线的下方。即发生的碰撞当一号线为水平或垂直时不应该判断，因为一种斜率为0，另一种斜率为无穷大 */ var canvas = document.get

ci

sed

Math

js

canvas

原创 2023-05-12 00:48:53 117 阅读

外接图形法-矩形&圆形36

//外接矩形-事前检测 ballWillHitledge: function(ledge){ var ballRight = ball.left+ball.width, ledgeRight = ledgt.left + ledge.width, ballbottom = ball.top+ball.height, nextBallBotto

ci

sed

Time

原创 2023-05-12 00:48:10 151 阅读

碰撞35

/*分为事前检测和事后检测，事前检测容易出错，因为它是根据当前帧速率来估算的，如果帧速度突然改变，那么估算出的结果可能就不准了，事后检测则不需要进行这些运算，但它要进行一些碰撞后的处理工作，这些工作通常和事前检测法中预估物体未来的运动位置所做的运算一样复杂*/ /*常用的检测方法如下：【1】外接图形法【2】光线投射法【3】分离轴法：它有一个副产品MTV（最小平移向量

帧速率

光线投射

原创 2023-05-12 00:47:31 113 阅读

时间轴扭曲34

/* 其就是根据固定的时间用不同的公式计算出当时的速度，时间扭曲函数其实就是用公式计算不同的时间，这样v=gt，计算出的速度就不是匀速的了，HTML5不支持补间动画，所以需要人为来实现。最多详细的扭曲函数参考：AnimationTimer.js */ var ANIMATION_DURATION = 1000; var pushTimer = new AnimationT

sed

ci

Time

canvas

js

原创 2023-05-11 15:21:00 167 阅读

物理效果33

/*在运动中最常使用的三种物理效果是重力非线性运动非线性动画 */ /*重力是9.81m/S===32ft/S 重力公式：v = gt 抛物线：v1 = v0-gt;v0是初始速度钟摆公式：a = a0*cos(Math.sqrt(g/i) * t) ;a表示当前的角度，a0表示钟摆的初始角度，g表示重力加速度，i表示钟摆的长度。此公式并没有考虑钟摆的重量

ci

Math

js

canvas

sprite

原创 2023-05-11 15:20:12 99 阅读

基于精灵的动画循环32

var sprites = []; var context = ...; function animate(time){ var i; context.clearRect(); drawBg(); for(i=0; i<sprites.length; ++i){ sprites.update(context, time); }

js

canvas

原创 2023-05-11 15:19:27 105 阅读

精灵的行为31

/*更为复杂的请参考6.3.2滚动的小球例子和6.10节炸弹的例子,精灵动画需要很好的结合下面的三个方法：【1】update：精灵对象的方法【2】advance：精灵表绘制器的方法【3】requestNextAnimationFrame：调用 */ var spritesheet = new Image(), runnerCells = [ { l

sed

ci

执行时间

js

canvas

原创 2023-05-11 15:18:52 67 阅读

精灵图片轮询绘制器30

var SpriteAnimator = function (painters, elapsedCallback) { this.painters = painters; if (elapsedCallback) { this.elapsedCallback = elapsedCallback; } }; SpriteAnimator.prototype = {

sed

回调函数

数组

js

canvas

原创 2023-05-11 15:18:10 104 阅读

精灵表绘制器29

SpriteSheetPainter = function (cells) { this.cells = cells; }; SpriteSheetPainter.prototype = { cells: [],//数组索引，记录精灵表中每个单元的信息 cellIndex: 0, advance: function () {//把索引值加1，以便在下一帧画第二个单元格的

Image

数组

js

canvas

原创 2023-05-11 15:17:25 85 阅读

图像绘制器28

//...V1..这个版本的实现存在一些问题，它没有考虑图像的加载是否完成。V2版本会修正这个问题 var ImagePainter = function (imageUrl) { this.image = new Image(); this.image.src = imageUrl; }; ImagePainter.prototype = { image: undefined

Image

加载

js

canvas

原创 2023-05-11 15:15:35 71 阅读

描边与填充绘制器27

var ballPainter = { paint: function (sprite, context) { var x = sprite.left + sprite.width/2, y = sprite.top + sprite.height/2, width = sprite.width,

享元模式

Math

实例化

js

canvas

原创 2023-05-11 15:15:00 83 阅读

精灵Sprite绘制器26

/*所有的绘制器都可以归纳为以下三类：【1】描边及填充绘制器：使用图形API来绘制精灵见6.02.01 【2】图像绘制器：用于绘制图像6.02.02 【3】精灵表绘制器：用于绘制精灵表中的单个精灵，把动画的所有帧放在一张图像上，此图片称为精灵表6.02.03 【4】精灵图片轮询绘制器：模拟精灵图表的一种技术 */ //下面这个持续过程需要注意 function a

API

js

canvas

原创 2023-05-11 15:13:55 116 阅读

Sprite对象25

var Sprite = function (name, painter, behaviors) { if (name !== undefined) this.name = name; if (painter !== undefined) this.painter = painter; if (behaviors !== undefined) this.behavi

数组

ci

Math

js

canvas

原创 2023-05-11 15:13:15 277 阅读

背景绘制24

/*常用的技术称为图块复制(blitting)，即从离屏缓冲区中将内容发生变化的那部分背景图像复制到屏幕上，还有其它两种方法是将所有内容擦除并重新绘制&仅重绘内容发生变化的那部分区域。一般是用clip()方法来实现的.如果背景比较简单采用将所有内容擦除再重新绘制可能性能更好【1】、用这些技术不用担心闪屏的问题，因为浏览器在实现时都采用了双缓冲技术。即把修改后的图像放在离屏文件中，

背景图

对象比较

双缓冲

js

canvas

原创 2023-05-10 10:29:50 97 阅读

简单动画-调用-帧23

/*js中的setIimeou和setInterval方法中的时间间隔并不准确，它只是规定了一个大致的时间，比如规定10m，则可能会在11秒执行。而且它是主动通知IE去改变，而最好的方式是让IE通知程序去做出改变，否则浏览器可能会在一段时间内死掉，所以W3C扩展了requestAnimationFrame()方法，它的时间更精确，而且是IE通知程序去做出改变，每种浏览器对上述方法的支持都不一样，所

ci

sed

Time

js

canvas

原创 2023-05-10 10:29:09 81 阅读

视频处理22

//.....................EXAMPLE01....................................................... <body> <video id='video' poster> <source src='Chrome_starts_fast_hammock.mp4'/>

ide

Data

2d

js

canvas

原创 2023-05-10 10:28:34 244 阅读 yyds干货盘点

放大镜21

/*工作原理如下：当拖动鼠标时，程序捕获放大镜最小外接矩形范围内的像素，然后程序将剪辑区域设置为放大镜所在范围，并将刚捕获的图像绘制到canvas自身，在绘制时调用接受9个参数的drawImage()方法来放大图像。除了绘制被放大镜放在的图像外，还会擦除用户拖动之前的那个放大镜图像，每当拖动放大镜时，程序会调用putInageData()方法把上一次移动鼠标时用getImag

sed

Math

Time

js

canvas

原创 2023-05-10 10:27:54 139 阅读

Worker工作线程20

/*当某个操作比较耗时时，可以把这些放在另一个线程中进行处理，处理时需要注意它的postMessage onmessage方法是定死的*/ var sunglassFilter = new Worker('sunglassFilter.js'); sunglassFilter.postMessage( context.getImageData(0, 0, canvas.width, canvas.

工作线程

回调函数

传递参数

js

canvs

原创 2023-05-10 10:27:05 94 阅读

图像与视频基础,离屏19

/*除了可以把图像绘制到canvas中，还可以把自身或其它canvas、视频的某一帧绘制到当前绘图环境中。 --1--有时两个canvas的相互绘制需要创建离屏canvas，离屏技术实际上是用空间换时间的一种技术创建离屏canvas元素，可以动态创建元素，也可以用网页中一个隐藏区域的元素 offscreenCanvas = document.crea

滤镜

数组

缩放

js

canvas

原创 2023-05-10 10:26:32 93 阅读

官方博客	全部文章	热门标签	班级博客
了解我们	网站地图	意见反馈

鸿蒙开发者社区	51CTO学堂
51CTO	软考资讯

51CTO博客

生而为人的博客

滑动条Slider48

进度条Progressbar47

圆角矩形RoundedRectangle46

自定义控件45

利用MTV弹离物体44

利用MTV分开和粘合物体43

根据最小平移向量应对碰撞42

图像与精灵的碰撞41

圆与多边形之间的碰撞40

多边形之间的碰撞39

分离轴定理SAT与最小平移向量MTV38

光线投射法37

外接图形法-矩形&圆形36

碰撞35

时间轴扭曲34

物理效果33

基于精灵的动画循环32

精灵的行为31

精灵图片轮询绘制器30

精灵表绘制器29

图像绘制器28

描边与填充绘制器27

精灵Sprite绘制器26

Sprite对象25

背景绘制24

简单动画-调用-帧23

视频处理22

放大镜21

Worker工作线程20

图像与视频基础,离屏19

欢迎