如何在画布上为运动图像绘制多条路径
How to draw multiple paths for a moving image on canvas
我刚刚开始学习Html5画布,主要想法是让一个图像通过多条线移动,创建路径,线的总距离应该是10km,所以我将使用10条1公里的线,使用javascript提示,用户会说图像将前进多少公里或多少米。我想我必须画十条线,形成图像的路径,但我仍然不知道如何在所有的线中移动图像。
下面的代码,将图像移动一次,没有行可以跟随,这就是我迄今为止所拥有的:
$(function(){
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var requestAnimationFrame = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function (callback) {
window.setTimeout(callback, 1000 / 60);
};
var pathArray = []; var enx = prompt("coordenada en x");
var eny = prompt("coordenada en y");
var num1 = parseInt(enx);
var num2 = parseInt(eny);
// Coordenada inicial
pathArray.push({
x: 50,
y: 50
});
pathArray.push({
x: num1,
y: num2
});
var polypoints = makePolyPoints(pathArray);
var width = 2;
var height = 5;
var position = 0;
var speed = 2;
animate();
var fps = 60;
function animate() {
setTimeout(function () {
requestAnimFrame(animate);
// calcular nueva posicion
position += speed;
if (position > polypoints.length - 1) {
return;
}
var pt = polypoints[position];
// dibujar
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.save();
ctx.beginPath();
ctx.translate(pt.x, pt.y);
// Objeto de la imagen del corredor
img = new Image();
// url de imagen
img.src = "img/mono_animar.png";
ctx.drawImage(img,0,0);
ctx.restore();
}, 1000 / fps);
}
function makePolyPoints(pathArray)
{
var points = [];
for (var i = 1; i < pathArray.length; i++) {
var startPt = pathArray[i - 1];
var endPt = pathArray[i];
var dx = endPt.x - startPt.x;
var dy = endPt.y - startPt.y;
for (var n = 0; n <= 100; n++)
{
var x = startPt.x + dx * n / 100;
var y = startPt.y + dy * n / 100;
points.push({
x: x,
y: y
});
}
}
return (points);}});
但我需要这样的东西:
http://jsfiddle.net/ExpertSystem/qxgkc/除了用户将键入从1到12km的数字以便沿着路径线移动图像之外。
您可以在绘制循环中实现一种"划线算法",该算法不会精确地绘制一条线,而是在该点所在的位置绘制一个项目。
function line(x0, y0, x1, y1){
var dx = Math.abs(x1-x0);
var dy = Math.abs(y1-y0);
var sx = (x0 < x1) ? 1 : -1;
var sy = (y0 < y1) ? 1 : -1;
var err = dx-dy;
while(true){ // put draw loop here.
drawImage(image,x0,y0);//setPixel(x0,y0); // Do what you need to for this
if ((x0==x1) && (y0==y1)) break;
var e2 = 2*err;
if (e2 >-dy){ err -= dy; x0 += sx; }
if (e2 < dx){ err += dx; y0 += sy; }
}
}
代码取自:Javascript 中的Bresenham算法
我建议使用像p5.js这样的库来做这样的事情。http://p5js.org
相关文章:
- 将字节转换为用于在HTML5画布上绘制的图像
- 如何摆脱角色移动时绘制的图像痕迹
- 在html5画布中将文本绘制为图像
- 如何分配在画布中绘制的图像的点击
- 按 alpha 通道绘制的图像映射
- 画布绘制按分区背景精灵绘制的图像
- 如何使用 drawImage 绘制的图像包含在使用 toDataURL 时
- 使用 for 循环动态创建在画布内绘制的图像
- 如何在 HTML5 画布上绘制背景图像
- 以图案绘制随机图像
- Javascript画布如何绘制很多图像
- 如何向左或向右创建运动图像动画
- 将可绘制的图像发送到ImageView
- 如何在画布上为运动图像绘制多条路径
- 在大画布上绘制大量图像时的异常行为
- 绘制与图像中心点相关的x,y的图像
- 为数组中的每个对象绘制画布笔画文本,但只绘制一个图像
- 如何在HTML5画布上移动绘制的图像
- 在Chrome中缓慢地绘制大型图像,从上到下逐步绘制
- 在画布上绘制大型图像