更改画布上每个形状的速度
Changing speed for each shape on canvas
本文关键字:速度 更新时间:2023-09-26
如何改变每个形状的速度?
我试着玩pct
但我想这是错误的方式:
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
window.requestAnimFrame = (function (callback) {
return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function (callback) {
window.setTimeout(callback, 1000 / 60);
};
})();
// shape stuff
var shapes = [];
var points;
// shape#1
points = pointsToSingleArray([{
x: 20,
y: 20
}, {
x: 50,
y: 100
}, {
x: 75,
y: 20
}, {
x: 100,
y: 100
}]);
shapes.push({
width: 20,
height: 10,
waypoints: points,
color: "red"
});
// shape#2
points = pointsToSingleArray([{
x: 0,
y: 0
}, {
x: 180,
y: 0
}, {
x: 180,
y: 180
}, {
x: 0,
y: 180
}, {
x: 0,
y: 0
}, {
x: 100,
y: 80
}]);
shapes.push({
width: 20,
height: 20,
waypoints: points,
color: "blue"
});
// animation stuff
var index = 0;
var fps = 60;
// start animating
animate();
function pointsToSingleArray(points) {
// array to hold all points on this polyline
var allPoints = [];
// analyze all lines formed by this points array
for (var a = 1; a < points.length; a++) { // loop through each array in points[]
// vars for interpolating steps along a line
var dx = points[a].x - points[a - 1].x;
var dy = points[a].y - points[a - 1].y;
var startX = points[a - 1].x;
var startY = points[a - 1].y;
// calc 100 steps along this particular line segment
for (var i = 1; i <= 100; i++) {
var pct = Math.min(1, i * .01);
var nextX = startX + dx * pct;
var nextY = startY + dy * pct;
allPoints.push({
x: nextX,
y: nextY
});
}
}
return (allPoints);
}
function animate() {
setTimeout(function () {
// this flag becomes true if we made any moves
// If true, we later request another animation frame
var weMoved = false;
// clear the canvas
ctx.clearRect(0, 0, canvas.width, canvas.height);
// draw all shapes
for (var i = 0; i < shapes.length; i++) {
// get reference to next shape
var shape = shapes[i];
// check if we still have waypoint steps for this shape
if (index < shape.waypoints.length) {
// we're not done, so set the weMoved flag
weMoved = true;
// draw this shape at its next XY
drawShape(shape, index);
} else {
// we're done animating this shape
// draw it in its final position
drawShape(shape, shape.waypoints.length - 1);
}
}
// goto next index XY in the waypoints array
// Note: incrementing by 2 doubles animation speed
index += 2;
// if weMoved this frame, request another animation loop
if (weMoved) {
requestAnimFrame(animate)
};
}, 1000 / fps);
}
function drawShape(shape, waypointIndex) {
var x = shape.waypoints[waypointIndex].x;
var y = shape.waypoints[waypointIndex].y;
ctx.fillStyle = shape.color;
ctx.fillRect(x, y, shape.width, shape.height);
}
也许有人知道速度变化的例子,或者如何使代码更好。
http://jsfiddle.net/4DxLL/- 改变速度
var index = [0, 0];
shapes.push({
width: 20,
height: 10,
waypoints: points,
color: "red",
speed: 10,
});
index[i] += shape.speed;
相关文章:
- Wacom stu-430签名捕获速度太慢
- 如何在速度模板中获取LiferayPortlet实例id
- 我想放慢html中进程栏的速度
- Knockout绑定大量数据的速度较慢
- Wordpress:未捕获引用错误:未定义速度
- 即使光标位于屏幕边缘,也可以跟踪鼠标速度
- Css优化谷歌页面速度洞察
- fullcalendar在删除导致浏览器挂起的多个事件时速度较慢
- 录制速度javascript
- Javascript图像数组预加载速度和从内存中删除
- 谷歌地图多边形减慢浏览器速度
- nodejs/ccurlhttp请求与postlerrest客户端相比速度较慢
- 从Three.js场景中删除许多对象的速度较慢
- 构建多个图表时,HighCharts加载数据的速度较慢
- jQuery.length()速度含义
- AMD应用程序在浏览器中的加载速度是否快于CommonJS应用程序
- 如何在不影响网站页面速度的情况下在我的网站上使用谷歌字体
- get_browser降低页面加载速度,任何其他选择
- 画布动画似乎不会以60帧/秒的速度运行
- Html画布绘制速度因画布元素过多而减慢