乐胖代购免代理版

欢迎

Shape.js-图形综合56

/* 这个类中对定了基类图形，子类多边形，图像，精灵，圆形放在了8.05节中 */ var Point = function (x, y) { this.x = x; this.y = y; }; var Shape = function () { this.x = undefined; this.y = undefined; this.strokeStyle

Math

scala

Source

原创 2023-05-13 09:37:02 137 阅读

AnimationTimer.js--动画计时器55

// An animation runs for a duration, in milliseconds. It's up to you, // however, to start and stop the animation -- animations do not stop // automatically. You can check to see if an animation is ov

sed

Time

Math

js

canvas

原创 2023-05-13 09:36:33 87 阅读

Stopwatch.js---一个简单的计时器工具类54

Stopwatch = function () { }; // You can get the elapsed time while the timer is running, or after it's // stopped. Stopwatch.prototype = { startTime: 0, running: false, elapsed: undefined,

sed

Time

js

canvas

原创 2023-05-13 09:35:42 119 阅读

文本光标、行、段落对象53

TextCursor = function (fillStyle, width) { this.fillStyle = fillStyle || 'rgba(0, 0, 0, 0.7)'; this.width = width || 2; this.left = 0; this.top = 0; }; TextCursor.p

Line

Data

ide

原创 2023-05-13 09:35:05 101 阅读

polygon.js---多边形52

//建立这样一个对象，每次绘制时可以加入到一个缓存中，以后可以实现拖动等操作 var Point = function (x, y) { this.x = x; this.y = y; }; var Polygon = function (centerX, centerY, radius, sides, startAngle, strokeStyle, fillStyle, fill

ide

Math

数组

原创 2023-05-13 09:34:33 236 阅读

requestAnimationFrame.js---封装动画Frame51

//主要是区分浏览器的不同，如果浏览器不支持requestNextAnimationFrame()方法，只能使用setTimeout()来代替。这种封装方式称为polyfill method，多平台智能适配方法，主要思想是利用不同平台的优缺点，当不满足时再用替代方法；个合集思想，而不是交集思想。 window.requestNextAnimationFrame = (function ()

firefox

Chrome

js

canvas

原创 2023-05-13 09:34:00 142 阅读

Gradle构建工具中文教程

Gradle 是一种开源构建自动化工具，可以构建几乎任何类型的软件。Gradle 对您要构建什么或如何构建它几乎没有任何假设。这使得 Gradle 特别灵活。Gradle 构建脚本是使用 Groovy 或 Kotlin DSL 编写的。在深入了解 Gradle 的细节之前，了解以下术语会很有帮助。一、术语项目：Gradle 构建的东西。项目包含一个构建脚本，它是一个位于项目根目录中的文件，通常名为

Gradle

maven

原创 2023-05-13 01:41:50 818 阅读 1点赞 yyds干货盘点

图片查看器50

<html> <head> <title>Panning Images</title> <style> body { background: rgba(100, 145, 250, 0.3); } #canvas {

ide

html

ci

js

canvas

原创 2023-05-12 00:57:10 79 阅读

图片查看器Pan49

var COREHTML5 = COREHTML5 || { }; // Constructor........................................................ COREHTML5.Pan = function(imageCanvas, image, viewportPercent, panCan

2d

Pan

sed

js

canvs

原创 2023-05-12 00:56:36 48 阅读

滑动条Slider48

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

ide

ci

2d

js

canvas

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

进度条Progressbar47

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

2d

js

canvas

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

圆角矩形RoundedRectangle46

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

2d

General

js

canvas

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

自定义控件45

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

控件

开发者

HTML

js

canvas

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

利用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 68 阅读

利用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 43 阅读

根据最小平移向量应对碰撞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 67 阅读 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 32 阅读

圆与多边形之间的碰撞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 82 阅读

多边形之间的碰撞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 63 阅读

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

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

凸多边形

凹多边形

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

光线投射法37

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

ci

sed

Math

js

canvas

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

外接图形法-矩形&圆形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 107 阅读

碰撞35

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

帧速率

光线投射

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

时间轴扭曲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 106 阅读

物理效果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 81 阅读

基于精灵的动画循环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 93 阅读

精灵的行为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 61 阅读

精灵图片轮询绘制器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 92 阅读

精灵表绘制器29

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

Image

数组

js

canvas

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

图像绘制器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 63 阅读

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

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

51CTO博客

生而为人的博客

欢迎

Shape.js-图形综合56

AnimationTimer.js--动画计时器55

Stopwatch.js---一个简单的计时器工具类54

文本光标、行、段落对象53

polygon.js---多边形52

requestAnimationFrame.js---封装动画Frame51

Gradle构建工具中文教程

图片查看器50

图片查看器Pan49

滑动条Slider48

进度条Progressbar47

圆角矩形RoundedRectangle46

自定义控件45

利用MTV弹离物体44

利用MTV分开和粘合物体43

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

图像与精灵的碰撞41

圆与多边形之间的碰撞40

多边形之间的碰撞39

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

光线投射法37

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

碰撞35

时间轴扭曲34

物理效果33

基于精灵的动画循环32

精灵的行为31

精灵图片轮询绘制器30

精灵表绘制器29

图像绘制器28