如何在畫布上爲移動圖像繪製多條路徑

我剛開始學習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到12公里的數字，以便沿着路徑線移動圖像。

來源

2015-11-22 Ricardo Gonzalez

你有任何我可以離開的代碼嗎？你能幫我們想象你想做什麼嗎？另外，你對你的問題的描述不是問題。是你的問題......我如何使圖像沿着一條線移動？ – ahitt6345

這就是我所需要的，沿着一條由多條路徑組成的線條移動圖像，就像一個曲折圖案 –

對不起，這就是問題所在，我如何使圖像沿着線條圖案移動 –

您可以在繪製循環中實現一種「線條繪製算法」，它不會精確繪製線條，而是在該點所在的位置繪製一個項目。取自

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; } 
    } 
}

代碼：Bresenham algorithm in Javascript

我會建議使用庫像p5.js做這樣的事情。 http://p5js.org

來源

2015-11-22 17:24:11 ahitt6345

如何在畫布上爲移動圖像繪製多條路徑

回答

相關問題