html5-canvas mover objeto en línea
Quiero mover un objeto en una línea inclinada. He dado mi código. En mi código en mi tercera división, cuando muevo el control deslizante, estoy dibujando una línea inclinada en esta línea, quiero mover un objeto. Lo mismo que estoy haciendo en mi primera div. Donde estoy moviendo un objeto en curva. Estoy buscando alguna función en la que proporcionaré los puntos y el objeto seguirá los puntos. Aquí está mi código. Este código solo funciona en Chrome, ya que estoy tratando de hacer esto solo para los navegadores Safari y Chrome.
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
.wrapper {
margin: 0 auto;
width: 1000px;
}
.canHdr {
float: left;
width: 450px;
height: 400px;
border: 1px solid red;
}
</style>
</head>
<body>
<form>
<!-- wrapper -->
<div class="wrapper">
<!-- canHdr -->
<div id="canHdr" class="canHdr" >
<p>
This is my 1st div with bezier curve the curve is getting drawn as slider moves and also a ball in moving on that .
</p>
<div class="canOuterHdr" >
<canvas id="myCanvas1" width="300" height="195" style="position: relative;">
[No canvas support]
</canvas>
</div>
<div id="slider1" class="newBg">
<input id="slide1" type="range" min="0" max="100" step="1" value="0" onchange="counterSlider('slide1');" />
</div>
</div>
<!--/ canHdr -->
<!-- canHdr2 -->
<div id="canHdr2" class="canHdr" >
<p>
This is my 2nd div
</p>
<div class="canOuterHdr" >
<canvas id="myCanvas2" width="300" height="195" style="position: relative;">
[No canvas support]
</canvas>
</div>
<div id="slider2" class="newBg">
<input id="slide2" type="range" min="0" max="100" step="1" value="0" onchange="counterSlider('slide2');" />
</div>
</div>
<!-- canHdr2 -->
<!-- canHdr3 -->
<div id="canHdr3" class="canHdr" >
<p>
This is my 3rd div with slanting line. I want to move a ball on this line when I move the slider. So as the line increases ball will also move on the line.
</p>
<div class="canOuterHdr" >
<canvas id="myCanvas3" width="300" height="195" style="position: relative;">
[No canvas support]
</canvas>
</div>
<div id="slider3" class="newBg">
<input id="slide3" type="range" min="0" max="100" step="1" value="0" onchange=" drawSlopeCurve2('slide3','100'); " />
</div>
</div>
<!--/ canHdr3 -->
<!-- canHdr4 -->
<div id="canHdr4" class="canHdr" >
<p>
This is my 4th div with slanting line. I want to move a ball on this line when I move the slider. So as the line increases ball will also move on the line.
</p>
<div class="canOuterHdr" >
<canvas id="myCanvas4" width="300" height="195" style="position: relative;">
[No canvas support]
</canvas>
</div>
<div id="slider4" class="newBg">
<input id="slide4" type="range" min="0" max="100" step="1" value="0" onchange=" drawSlopeCurve1('slide4','100'); " />
</div>
</div>
<!--/ canHdr4 -->
</div>
<!-- /wrapper -->
<script type="text/javascript">
function counterSlider(sID) {
var slideVal = document.getElementById(sID).value;
/*if (maxValue ==100){
slideVal=slideVal/100;
}*/
slideVal = slideVal / 100;
var position = slideVal;
var startPt = {
x : 18.8,
y : 45
};
var controlPt = {
x : 28,
y : 160
};
var endPt = {
x : 228,
y : 165
};
var startPt2 = {
x : 20,
y : 75
};
var controlPt2 = {
x : 28,
y : 160
};
var endPt2 = {
x : 228,
y : 165
};
if (slideVal == 0) {
erase('myCanvas2');
erase('myCanvas3');
erase('myCanvas4');
//newSprite('myCanvas1b', 18.8, 45);
drawBezier2('myCanvas1', new Array({
x : 18.8,
y : 45
}, {
x : 28,
y : 160
}, {
x : 228,
y : 165
}), slideVal);
drawBezier2('myCanvas2', new Array({
x : 20,
y : 75
}, {
x : 28,
y : 160
}, {
x : 228,
y : 165
}), slideVal);
} else if (slideVal > 0 && slideVal <= 34) {
erase('myCanvas1');
//erase('myCanvas1b');
erase('myCanvas2');
erase('myCanvas3');
erase('myCanvas4');
drawBezier2('myCanvas1', new Array({
x : 18.8,
y : 45
}, {
x : 28,
y : 160
}, {
x : 228,
y : 165
}), slideVal);
drawBezier2('myCanvas2', new Array({
x : 20,
y : 75
}, {
x : 28,
y : 160
}, {
x : 228,
y : 165
}), slideVal);
drawNextPoint('myCanvas1', startPt, controlPt, endPt, position);
drawNextPoint('myCanvas2', startPt2, controlPt2, endPt2, position);
} else if (slideVal > 34 && slideVal <= 67) {
erase('myCanvas1');
erase('myCanvas2');
erase('myCanvas3');
erase('myCanvas4');
drawBezier2('myCanvas1', new Array({
x : 18.8,
y : 45
}, {
x : 28,
y : 160
}, {
x : 228,
y : 165
}), slideVal);
drawBezier2('myCanvas2', new Array({
x : 20,
y : 75
}, {
x : 28,
y : 160
}, {
x : 228,
y : 165
}), slideVal);
drawNextPoint('myCanvas1', startPt, controlPt, endPt, position);
drawNextPoint('myCanvas2', startPt2, controlPt2, endPt2, position);
} else if (slideVal > 67 && slideVal <= 100) {
erase('myCanvas1');
erase('myCanvas2');
erase('myCanvas3');
erase('myCanvas4');
drawBezier2('myCanvas1', new Array({
x : 18.8,
y : 45
}, {
x : 28,
y : 160
}, {
x : 228,
y : 165
}), slideVal);
drawBezier2('myCanvas2', new Array({
x : 20,
y : 75
}, {
x : 28,
y : 160
}, {
x : 228,
y : 165
}), slideVal);
drawNextPoint('myCanvas1', startPt, controlPt, endPt, position);
drawNextPoint('myCanvas2', startPt2, controlPt2, endPt2, position);
}
}
function erase(canvasId) {
var canvas = document.getElementById(canvasId);
var context = canvas.getContext("2d");
context.beginPath();
context.clearRect(0, 0, canvas.width, canvas.height);
canvas.width = canvas.width;
}
/**********for backgroundImage********************/
function _getQBezierValue(t, p1, p2, p3) {
var iT = 1 - t;
return iT * iT * p1 + 2 * iT * t * p2 + t * t * p3;
}
function getQuadraticCurvePoint(startX, startY, cpX, cpY, endX, endY, position) {
return {
x : _getQBezierValue(position, startX, cpX, endX),
y : _getQBezierValue(position, startY, cpY, endY)
};
}
function drawNextPoint(canId, startPt, controlPt, endPt, position) {
var pt = getQuadraticCurvePoint(startPt.x, startPt.y, controlPt.x, controlPt.y, endPt.x, endPt.y, position);
position = (position + 0.006) % 1.0;
var canvas = document.getElementById(canId);
var ctx = canvas.getContext('2d');
//ctx.globalCompositeOperation = 'source-atop';
//ctx.globalCompositeOperation = "destination-over";
ctx.beginPath();
ctx.fillStyle = "#0077c1";
ctx.arc(pt.x, pt.y, 6, 0, Math.PI * 2, true);
ctx.closePath();
ctx.fill();
}
function newSprite(canId, mvx, mvy) {
var canvas = document.getElementById(canId);
var ctx = canvas.getContext('2d');
ctx.globalCompositeOperation = 'source-atop';
//ctx.globalCompositeOperation = "destination-over";
ctx.beginPath();
ctx.fillStyle = "#0077c1";
ctx.arc(mvx, mvy, 6, 0, Math.PI * 2, true);
ctx.closePath();
ctx.fill();
}
function drawBezier2(canId, points, slideVal) {
var canvas = document.getElementById(canId);
var context = canvas.getContext("2d");
//context.globalCompositeOperation = 'source-atop';
//context.strokeStyle = "rgb(113, 113, 213)";
context.strokeStyle = "#000";
context.lineWidth = 0.6;
context.beginPath();
// Label end points
//context.fillStyle = "rgb(0, 0, 0)";
// Draw spline segemnts
context.moveTo(points[0].x, points[0].y);
for (var t = 0; t <= slideVal; t += 0.1) {
context.lineTo(Math.pow(1 - t, 2) * points[0].x + 2 * (1 - t) * t * points[1].x + Math.pow(t, 2) * points[2].x, Math.pow(1 - t, 2) * points[0].y + 2 * (1 - t) * t * points[1].y + Math.pow(t, 2) * points[2].y);
}
// Stroke path
context.stroke();
}
function drawSlopeCurve1(sID, maxValue) {
// erase('canvasTwo');
var canId = 'myCanvas4';
var slideVal = parseInt(document.getElementById(sID).value);
var canvas = document.getElementById(canId);
var context = canvas.getContext('2d');
canvas.width = canvas.width;
//line end points
x1 = 16;
y1 = 170;
x2 = 200;
y2 = 80;
//get slope (rise over run)
var m = (y2 - y1) / (x2 - x1);
//get y-intercept
var b = y1 - (m * x1);
//get distance between the two points
var distance = Math.sqrt((x2 - x1) * (x2 - x1) + (y2 - y1) * (y2 - y1));
//get new x and y values
var x = x1 + parseInt(distance / maxValue * slideVal);
var y = parseInt(m * x + b);
context.beginPath();
context.moveTo(x1, y1);
context.lineTo(x, y);
context.lineWidth = 0.6;
context.stroke();
}
function drawSlopeCurve2(sID, maxValue) {
// erase('canvasTwo');
var canId = 'myCanvas3';
var slideVal = parseInt(document.getElementById(sID).value);
var canvas = document.getElementById(canId);
var context = canvas.getContext('2d');
canvas.width = canvas.width;
//line end points
x1 = 16;
y1 = 170;
x2 = 160;
y2 = 72;
//get slope (rise over run)
var m = (y2 - y1) / (x2 - x1);
//get y-intercept
var b = y1 - (m * x1);
//get distance between the two points
var distance = Math.sqrt((x2 - x1) * (x2 - x1) + (y2 - y1) * (y2 - y1));
//get new x and y values
var x = x1 + parseInt(distance / maxValue * slideVal);
var y = parseInt(m * x + b);
context.beginPath();
context.moveTo(x1, y1);
context.lineTo(x, y);
context.lineWidth = 0.6;
context.stroke();
}
</script>
</form>
</body>
</html>
Gracias por adelantado. mi enlace jsfiddle:http://jsfiddle.net/g7hWD/1/